使用自定义属性实现摇号排名——>小案例

最新推荐文章于 2022-10-09 21:08:37 发布

公有云私有云

最新推荐文章于 2022-10-09 21:08:37 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/81780563

版权

应用到的知识点：setAttribute；getAttribute；dataset；Array.prototype.slice.call()；appendChild。

功能说明：有一些用户在排队，只要刷新，它们的顺序就随机的发生变化；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改元素的属性</title>
</head>
<body>
    <!--1. 使用自定义属性实现摇号排名-->
    <ul>
        <li>Eric</li>
        <li>Scott</li>
        <li>Jerry</li>
        <li>Tom</li>
        <li>Rose</li>
        <li>John</li>
        <li>Smith</li>
        <li>Andy</li>
    </ul>
    <script>
        window.$ = HTMLElement.prototype.$ = function(selector){
            return (this == window?document:this).querySelectorAll(selector);
        }
        var lis = $("ul li");                                               //获得所有的li
        var arr = [];                                                       //定义一个数组用于存放随机数，随机数必须和li的数目一样
        while (arr.length<lis.length){                                      //生成随机数
            var n = parseInt(Math.random()*lis.length+1);
            (arr.indexOf(n)==-1) && (arr.push(n));
        }
        for (var i=0;i<arr.length;i++){
            lis[i].setAttribute("data-i",arr[i]);
        }
        lis = Array.prototype.slice.call(lis);                              //把类数组对象转换成数组对象
        lis.sort(function(a,b){return a.getAttribute("data-i")- b.getAttribute("data-i")});
        //lis.sort(function(a,b){return a.dataset.i-b.dataset.i});          //这种方法有兼容性问题；
        var ul = $("ul")[0];
        ul.innerHTML = null;
        for (var i=0;i<lis.length;i++){
            ul.appendChild(lis[i]);
        }


    </script>
</body>
</html>

公有云私有云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用自定义属性实现摇号排名——>小案例

应用到的知识点：setAttribute；getAttribute；dataset；Array.prototype.slice.call()；appendChild。功能说明：有一些用户在排队，只要刷新，它们的顺序就随机的发生变化；代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta c...
复制链接

扫一扫