JavaScript li元素的顺序随机打乱

2019-2-28 12:51| 作者: admin| 查看: 892| 评论: 0|来自: 蚂蚁部落

本章节介绍一下如何利用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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部