廢話不多說，直接上代碼：
<!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實現隨機點名系統(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
