• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    发票中奖查询网站:JavaScript li元素的顺序随机打乱

    燕赵风采20选5走势图 www.fllv.net 2019-2-28 12:51| 作者: admin| 查看: 885| 评论: 0|来自: 蚂蚁部落

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

    代码实例如下:

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

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 北京pk10直播视频直播 香港本港台直播报码 3d试机号和开奖号整体走势图 幸运赛车怎么算 江西时时彩组3遗漏 最新体彩七星彩走势图 北京中彩 捕鱼达人单机游戏下载 河南福彩22选5开奖结果 幸运农场水果开奖 北京赛车pk10app 北京赛车冠军技巧 双色球官方网站唯一指定官方网站 体彩七7星彩开奖号码 快速时时彩计划网 云南时时彩三星基本走势