小编给大家分享一下js怎么实现随机点名系统,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,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"> <h2 align="center">随机点名系统</h2> <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怎么实现随机点名系统”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。