应用到的知识点: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>