1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{list-style: none;} 12 #box{ 13 width: 500px; 14 15 } 16 #btnbox{ 17 height: 50px; 18 text-align: center; 19 } 20 #con li{ 21 float: left; 22 width: 100px; 23 height: 130px; 24 border: 1px solid #ccc; 25 } 26 #con img{ 27 width: 100px; 28 height: 100px; 29 } 30 </style> 31 <script src="hl_tool.js" type="text/javascript" charset="utf-8"></script> 32 <script type="text/javascript"> 33 window.onload = function(){ 34 var oBox = hGetId('box'); 35 var oCon = hGetId('con'); 36 var oBtmBox = hGetId('btnbox'); 37 var aIptBtn = hGetTagName('input',oBtmBox); 38 var oUl = hGetTagName('ul',oCon)[0]; 39 var onOff = true; 40 var aImgData = [ 41 {'index':0,'img':'img/1.png','text':'1.小鸟'}, 42 {'index':1,'img':'img/2.png','text':'2.游戏美女'}, 43 {'index':2,'img':'img/3.png','text':'3.完美世界'}, 44 {'index':3,'img':'img/4.png','text':'4.机器人'} 45 ] 46 47 function UlHtml(){ 48 var str = ''; 49 50 for (var i = 0; i < aImgData.length; i++) { 51 str += '<li><img src="'+aImgData[i]['img'] +'"/><p>'+aImgData[i]['text'] +'</p></li>'; 52 } 53 oUl.innerHTML = str; 54 } 55 56 UlHtml(); 57 58 59 60 aIptBtn[0].onclick = function(){ 61 if(onOff){ 62 63 aImgData.sort(function(a , b){ 64 return b.index - a.index ; 65 }); 66 this.value= '从小到大排序'; 67 }else{ 68 69 aImgData.sort(function(a , b){ 70 return a.index - b.index ; 71 }); 72 this.value= '从大到小排序'; 73 } 74 75 oUl.innerHTML = ''; 76 UlHtml(); 77 onOff = !onOff; 78 } 79 80 aIptBtn[1].onclick = function(){ 81 aImgData.sort(function(a , b){ 82 return Math.random() - 0.5; 83 }); 84 oUl.innerHTML = ''; 85 UlHtml(); 86 87 } 88 89 90 } 91 </script> 92 </head> 93 <body> 94 <div id="box"> 95 <div id="btnbox"> 96 <input type="button" name="" id="" value="从大到小排序" /> 97 <input type="button" name="" id="" value="随机排序" /> 98 </div> 99 <div id="con"> 100 <ul> 101 <!--<li><img src="img/1.png"/><p>1.小鸟</p></li> 102 <li><img src="img/2.png"/><p>2.游戏美女</p></li> 103 <li><img src="img/3.png"/><p>3.完美世界</p></li> 104 <li><img src="img/4.png"/><p>4.机器人</p></li>--> 105 </ul> 106 </div> 107 </div> 108 </body> 109 </html>