jsはli要素の順序をランダムにコードの例を狂わせる.

2588 ワード

jsはli元素の順序をランダムに混乱させるコードの例を紹介します.この章ではjavascriptを利用してulの下のli元素の順序をランダムに乱させるには、この需要は実際の応用では少ないかもしれません.コードは以下の通りです

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<script type="text/javascript">
window.onload = function() {
  var obox = document.getElementById("box");
  var cloneBox=obox.cloneNode(true);
  var lis = [];
  for(var index=0;index<cloneBox.children.length;index++){
    lis.push((cloneBox.children)[index]);
  }
   
  var obt = document.getElementById("bt");[/size]
  function rnd(a,b) {
    return Math.random() > 0.5 ? -1 : 1;
  }
    
  obt.onclick = function() {
    obox.innerHTML = "";
    var newArray = lis.sort(rnd);
    for (var i=0,l=newArray.length; i<l; i++) {
      obox.appendChild(newArray[i].cloneNode(true));
    }
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>     </li>
  <li>     </li>
  <li>     </li>
  <li>     </li>
  <li>     </li>
</ul>
<input type="button" id="bt" value="    " />
</body>
</html>

以上のコードは私達の要求を実現しました.ボタンをクリックして、li元素の順番をランダムに狂わせることができます.以下にその実現過程を紹介します.1.コードのコメント:1.var obox=document.getElemenntById(「box」)を取得し、id属性値がboxの要素オブジェクトとなる.2.var cloneBox=obox.cloneNode(true)は、Ooboxオブジェクトをクローン化し、深さクローンを使用して、つまり、そのサブ要素もクローン化されています.クローンが必要なのは、後のコードobox.innersHTML=「」が元素を空にすることができ、ソート効果が実現できなくなるからです.3.var lis=[]は、li要素を保存するための配列を宣言します.4.for(var index=0;index＜cloneBox.children.length;index+){lis.push((clone Box.children)[index]))}クローン後の要素の中のli元素を配列に入れる.5.var obt=document.getElemenntById(「bt」)は、ボタンオブジェクトを取得する.6.function rnd(a,b)｛return Math.random()>0.5?-1;｝を返します.この関数は1または-1を返します.配列のsort()メソッドのパラメータとして使用します.7.obox.innerHTML=「」は、元の内容をクリアします.8.var newAray=lis.sort(rnd)は、配列をランダムに並べ替えて、新しい配列を生成します.9.for(var i=0、l=newAray.length;i＜l;i＋)｛obx.appendChild(newAray.cloneNode)｝は、配列の各要素を巡り、各要素のクローン要素をulに追加することが重要であり、追加のクローン要素でない場合は、まだ2回目のクリックに失敗します.二.関連閲覧:1.loneNode()関数は、javascriptのclone Node()関数コードの例を参照してください. 2.children属性はjavascriptのchildren属性の使い方の章を参照してください. 3.Math.random()関数は、jsのランダム関数Math.random()の章を参照してください. 4.sort()関数はjavascriptのsort()関数の使い方を参照して、章を詳しく説明してください. 5.apppendChild()関数は、javascriptのinsertBefore()関数とappndChild()の使い方の章を参照してください.
原文の住所は:http://www.softwhy.com/forum.php?mod=viewthread&tid=13961
詳細は下記を参照してください.http://www.softwhy.com/javascript/

typeofとinstance of