JS随机显示的问题?求高手帮忙!

<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>果茶</li>
<li>啤酒</li>
<li>矿泉水</li>
<li>可乐</li>
</ul>请问如何用JS使上面的li属性排列顺序是随机的？

解决方案 »

  1.   

    懒得写代码
    有几种方法可以实现，首先你先把这些东西放到数组里，然后把数组随机排序，这个不会也不会吧。。
    排完了就用innerHTML属性往UL里写就可以了。。
      

  2.   


    <ul id="t"> 
    <li>咖啡</li> 
    <li>牛奶</li> 
    <li>果茶</li> 
    <li>啤酒</li> 
    <li>矿泉水</li> 
    <li>可乐</li> 
    </ul> 
    <script>
    var u = document.getElementById('t');
    var tmp = [];
    while(t.childNodes.length>0){
    var li = t.childNodes[0].cloneNode();
    li.innerText = t.childNodes[0].innerText;
    tmp.push(li);
    t.removeChild(t.childNodes[0]);
    }
    while(tmp.length>0){
    var r = Math.floor(Math.random()*tmp.length);
    u.appendChild(tmp[r]);
    tmp.splice(r, 1);
    }
    </script>
      

  3.   

    楼上高人,我也玩,花1小时绕了个圈!
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    <script type="text/javascript">function random(){
    var domarr=document.getElementsByTagName("li");
    var idarr=[];for(var i=0;i<domarr.length;i++){
    idarr[i]=i;
    }idarr.sort(function(){
        return 0.5 > Math.random();
    });str="";
    for(var i=0;i<idarr.length;i++){
    str+="<li>"+domarr[idarr[i]].innerHTML+"</li>"
    }
    document.getElementsByTagName("ul")[0].innerHTML=str;
    }
    </script>
     <BODY onload="random();">
      <ul> 
    <li>咖啡 </li> 
    <li>牛奶 </li> 
    <li>果茶 </li> 
    <li>啤酒 </li> 
    <li>矿泉水 </li> 
    <li>可乐 </li> 
    </ul>  </BODY>
    </HTML>
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>test</title>
    </head>
    <body>
    <script type="text/javascript">
        new init();
        function init() {        var arr = new Array();
            var flag;
            do{
                flag = 0;
                var random = parseInt(Math.random() * 10);
                if (random > 2) {
                    continue;
                }
                for (var i = 0; i < 3; i++) {
                    if (random != arr[i]) {
                        flag++;                }
                    if (flag == 3) {
                        arr.push(random);
                    }
                }        } while (arr.length != 3);        var mydiv = document.createElement("div");
            var arrdiv = new Array();
            arrdiv.push("<ul>");
            for (var j = 0; j < arr.length; j++) {
                arrdiv.push("<li>");
                switch (arr[j])
                        {
                    case 0:
                        arr[j] = "咖啡";
                        break;
                    case 1:
                        arr[j] = "牛奶";
                        break;
                    case 2:
                        arr[j] = "面包";
                        break;            }            arrdiv.push(arr[j]);
                arrdiv.push("</li>");
            }
            arr.push("</ul>");        mydiv.innerHTML = arrdiv.join("").toString();
            document.body.appendChild(mydiv);
        }
    </script>
    </body>
    </html>
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    <script type="text/javascript">function random(){
    var domarr=document.getElementById("a").children;
    var idarr=[];for(var i=0;i<domarr.length;i++){
    idarr[i]=i;
    }idarr.sort(function(){
        return 0.5 > Math.random();
    });str="";
    for(var i=0;i<idarr.length;i++){
    str+="<li>"+domarr[idarr[i]].innerHTML+"</li>"
    }
    document.getElementsByTagName("ul")[0].innerHTML=str;
    }
    </script>
     <BODY onload="random();">
    <ul id="a">
    <li>咖啡 </li> 
    <li>牛奶 </li> 
    <li>果茶 </li> 
    <li>啤酒 </li> 
    <li>矿泉水 </li> 
    <li>可乐 </li> 
    </ul> <ul id="b"> 
    <li>咖啡 </li> 
    <li>牛奶 </li> 
    <li>果茶 </li> 
    <li>啤酒 </li> 
    <li>矿泉水 </li> 
    <li>可乐 </li> 
    </ul> 
     </BODY>
    </HTML>4楼的修改下，不限制，整个页面会很乱的。有多个ul的话。3楼的FF不行。