js实现随机点名系统(实例讲解)

2019-11-19 15:08:51

字体：大中小

来源：转载

供稿：网友

废话不多说，直接上代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>随机点名</title><style type="text/css">td{text-align: center;}</style></head><body><table width="760" border="1" height="460" align="center"><h1 align="center">随机点名系统</h1><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><div align="center"><br/><br/><input type="button" value="随机抽取" onclick="selectRandom();"/><input type="button" value="打乱顺序" onclick="Upsetorder();"/><br/><br/><input type="button" value="快速抽取" onclick="Quickextr();"/><input type="button" value="停止抽取" onclick="Stopextr();"/></div><script type="text/javascript">var classMate = ["周远康","刘婷婷","戴娜","范凯","向彬","胡波","胡辉","黄缘平","刘云","刘嘉鑫","赵福全","王小妹","苏伟","李辉","曾伟","李佳晓","钟仕文","张志强","袁鑫豪","余日成","付立金","彭福康","邓慧佳","曹蓉","刘未东","桂义","彭俊斌","周康华","曹增","蒋煜"];//定义一个变量存随机数组var indexArr;//打乱顺序function Upsetorder(){alert(1);//初始化数组indexArr = [];//获取新的随机数var rd = parseInt(Math.random()*classMate.length);while(true){do{var falg = true;//循环获得每一个下标for (var i = 0 ; i <classMate.length ; i++) {//判断是否已存在这个下标,是否为重复之后 跳出if(indexArr[i] == rd){falg = false;break;}}//判断是否添加if(falg){indexArr.push(rd);}rd = parseInt(Math.random()*classMate.length);}while (falg);if(indexArr.length == classMate.length){break;}}}//随机抽取function selectRandom(){var allTd = document.getElementsByTagName("td");for (var i = 0; i < classMate.length; i++) {allTd[i].innerHTML = classMate[indexArr[i]];allTd[i].style.color = "#ff6633";allTd[i].style.background = "#ff6633";allTd[i].onclick = function (){this.style.background = "white";}}}//快速抽取var interId;var count = 0;//保存已被选出的人var myChecked = [];var allTd = document.getElementsByTagName("td");function Quickextr(){if(interId){return;}//把所有的td还原为最初interId = setInterval(function(){for (var i = 0; i < classMate.length; i++) {allTd[i].style.color = "#ff6633";allTd[i].style.background = "#ff6633";}for (var i = 0; i < myChecked.length; i++) {allTd[myChecked[i]].style.color = "#ff6633";allTd[myChecked[i]].style.background = "white";}allTd[count%classMate.length].style.color = "white";allTd[count%classMate.length].style.background = "white";count++;},1);}//停止抽取function Stopextr(){clearInterval(interId);interId = undefined;var checkIds = count%classMate.length==0?classMate.length-1:(count%classMate.length)-1;allTd[checkIds].style.color = "#ff6633";myChecked.push(checkIds);}</script></body></html>

以上这篇js实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：浅谈Node异步编程的机制

下一篇：原生JS获取元素的位置与尺寸实现方法