随机排序和从大到小排序以及从小到大排序

  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>