废话不多说,直接上代码:
<!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"#ff6633"; myChecked.push(checkIds); } </script> </body> </html>
以上这篇js实现随机点名系统(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】