本文介绍了一种通过JavaScript实现的随机排序方法，并为DOM元素添加自定义属性来记录排序依据的过程。具体步骤包括生成随机数并将其作为属性值设置到元素上，再利用属性值进行排序。
<!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
<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>
</body>
</html>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
<script >
window.onload=function(){
//获取ul下的所有li
var lis=document.querySelectorAll("ul li");
var nums=[];
//反复生成随机数:必须和lis的个数一样
while(nums.length < lis.length) {
var n=parseInt(Math.random()*lis.length+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
/*遍历生产的随机数，给每个li添加特性*/
for (var i = 0; i < nums.length; i++) {
lis[i].setAttribute("data-j",nums[i]);
}
/*
问题1：lis是类数组对象，没有sort方法
解决1：把类数组对象转化为标准数组对象
问题2：比较器*/
lis=Array.prototype.slice.call(lis);
lis=lis.sort(function(li1,li2){
var n1=parseInt(li1.getAttribute("data-j"));
var n2=parseInt(li2.getAttribute("data-j"));
return n1-n2;
});
for (var i = 0; i < nums.length; i++) {
console.log(lis[i].getAttribute("data-j")+lis[i].innerHTML);
}
}
</script>
</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>
</body>
</html>
扫一扫
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
