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

应用到的知识点: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;
        console.log(lis[1]);
        for (var i=0;i<lis.length;i++){
            ul.appendChild(lis[i]);
        }


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

猜你喜欢

转载自blog.csdn.net/qq_39579242/article/details/81780563