js实现随机点名系统(实例讲解)
更新时间:2017年10月18日 09:08:43 作者:落瞳不是无情物
下面小编就为大家带来一篇js实现随机点名系统(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
废话不多说,直接上代码:
<!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实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论