css+js+html+列表排序

1、/*css*/#ul1 {background:green;}#ul2 {background:yellow;}

2、<!--html--><input id="btn1" type="button" value="排序" /><ul id="ul1"> <li>34</li> <li>25</li> <li>9</li> <li>88</li> <li>14</li> <li>24</li> <li>44</li> <li>51</li> <li>52</li> <li>34</li> <li>25</li> <li>9</li> <li>88</li> <li>14</li> <li>24</li> <li>44</li> <li>51</li> <li>52</li></ul>

3、//js部分//方法一 var btn1=document.getElementById('btn1'稆糨孝汶;); var ul1=document.getElementById('ul1'); oli=ul1.getElementsByTagName('li'); n=0; btn1.onclick=function(){fa();} function fa(){ for(var i=0;i<oli.length;i++){ for(var j=0;j<oli.length;j++){ if(oli[i].innerHTML-oli[j].innerHTML<0){ n=oli[i].innerHTML; oli[i].innerHTML=oli[j].innerHTML; oli[j].innerHTML=n; } } } } // //方法二 // var aa=document.getElementById('btn1'); // aa.onclick=function(){ // fun(); // } // var bb=document.getElementsByTagName('li'); // var cc=[]; // function fun(){ // for(var i=0;i<bb.length;i++){ // cc[i]=Number(bb[i].innerHTML); // } // cc.sort(function(n1,n2){return n1-n2}); // for(var i=0;i<bb.length;i++){ // bb[i].innerHTML=String(cc[i]); // } // }