JavaScript li元素的順序隨機打亂

admin發表於2019-02-28
JavaScript隨機

本章節介紹一下如何利用JavaScript將ul下的li元素順序隨機打亂。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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");
  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></i>

點選按鈕可以隨機打亂li元素的順序，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.var obox = document.getElementById("box")，獲得id屬性值為box的元素物件。

（2）.var cloneBox=obox.cloneNode(true)，克隆obox物件，使用深度克隆，也就是它的子元素也會被克隆，之所以需要克隆是因為後面的程式碼obox.innerHTML=""能夠將元素清空，也就無法實現排序效果了。

（3）.var lis = []，宣告一個陣列，用來存放li元素。

（4）.for(var index=0;index<cloneBox.children.length;index++){lis.push((cloneBox.children)[index]);}，將克隆後的元素中的li元素放入陣列。

（5）.var obt = document.getElementById("bt")，獲取按鈕物件。

（6）.function rnd(a,b) {return Math.random() > 0.5 ? -1 : 1;}，此函式用來返回1或者-1，它用來作為陣列的sort()方法的引數。

（7）.obox.innerHTML=""，清空ul下原來的內容。

（8）.var newArray=lis.sort(rnd)，對陣列進行隨機排序，並生成新的陣列。

（9）.for (var i=0,l=newArray.length; i<l; i++) {obox.appendChild(newArray.cloneNode(true));}，遍歷陣列的每一個元素，並將每一個元素的克隆元素追加到ul，這一點很重要，如果不是追加的克隆元素，當第二次點選的時候還是會失敗。

二.相關閱讀：

（1）.cloneNode方法參閱JavaScript cloneNode()一章節。 

（2）.children屬性參閱JavaScript children一章節。 

（3）.Math.random方法參閱JavaScript Math.random()一章節。 

（4）.sort方法參閱JavaScript sort()一章節。 

（6）.appendChild方法參閱JavaScript appendChild()一章節。

相關文章