修改元素的属性:使用自定义属性实现摇号排名

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50918623

本文介绍了如何通过HTML和JavaScript实现一个摇号排名系统，包括自定义属性的应用、随机数生成、数组操作以及排序算法的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
</head>
<body>
	<!--1. 使用自定义属性实现摇号排名-->
	<ul id="<span style="color:#ff0000;">queue</span>">
		<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>
	<span style="color:#ff0000;"><script src="js/3_1.js"></script></span>
</body>
</html>
</span>

js:

<span style="font-size:18px;"><span style="color:#ff0000;">window.οnlοad=function()</span>{//在html中引入整个页面就可以了，不用调用，自动呈现页面上
	//查找id为queue的ul下的所有li,将结果保存到变量lis中
	var lis=queue.getElementsByTagName("li");                                                       
	//获取人数:lis的个数，保存到变量count中
	var count=lis.length;
	//声明并初始化空数组nums
	var nums=[];
	//反复执行
	while(nums.length<count){//反复执行，知道nums的length等于count
		//在1~count之间生成一个随机数，保存到变量r中
		var r=parseInt(Math.random()*(count+1));
		//如果在nums中找不到r
		if(nums.indexOf(r)==-1){
			//将r压入到nums中
			nums.push(r);
			
		}
			
	}
	//遍历lis中每个li
	for(var i=0;i<count;i++){//遍历i中的每个li
		//为每个li设置nums属性，值为nums中i的位置的数字
		lis[i].setAttribute("num",nums[i]);

	}
	//将lis转为普通数组
	lis=Array.prototype.slice.call(lis);
	lis.<span style="color:#ff0000;">sort</span>(function(a,b){//按升序
		return a.getAttribute("num")-b.getAttribute("num");
	});
	//清空queue的旧内容
	queue.innerHTML="";
	//遍历lis中每个li,将其添加到id为queue的元素下
	for(var i=0;i<count;i++){
		//把一个新元素的节点添加到父元素下
		queue.appendChild(lis[i]);
	}
}</span>

效果：