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

来源：互联网发布：sql表添加数据编辑：程序博客网时间：2024/05/16 00:47

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.onload=function()</span>{//在html中引入整个页面就可以了，不用调用，自动呈现页面上//查找id为queue的ul下的所有li,将结果保存到变量lis中var lis=queue.getElementsByTagName("li");                                                       //获取人数:lis的个数，保存到变量count中var count=lis.length;//声明并初始化空数组numsvar nums=[];//反复执行while(nums.length<count){//反复执行，知道nums的length等于count//在1~count之间生成一个随机数，保存到变量r中var r=parseInt(Math.random()*(count+1));//如果在nums中找不到rif(nums.indexOf(r)==-1){//将r压入到nums中nums.push(r);}}//遍历lis中每个lifor(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>

效果：

0 0