• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  JavaScript li元素的顺序随机打乱

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

                  本章节介绍一下如何利用JavaScript将ul下的li元素顺序随机打乱。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <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()一章节。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            北京快三开最快开奖现场直播 加盟彩票投注站多少钱 海南七星彩走势图表 快乐飞艇怎么玩 娱乐场所消防应急预案 nba历史得分榜第一 竞彩足球比分方法 上海时时彩软件 新疆11选5和值走势图解 福建31选7彩票2元网 广东快乐十分手机投 黑龙江p62几号开奖 安徽25选5最新开奖结果查询 牛牛汽车后处理 北京快乐8一天多少期