搭建小程序商城_js完成讲堂随机点名体系

js实现课堂随机点名系统       这篇文章主要介绍了js实现课堂随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js随机点名系统的具体代码，供大家参考，具体内容如下

style样式

 style 
 .cor {
 background-color: #6083cd;
 #box {
 width: 500px;
 border: 2px solid black;
 margin: 0 auto;
 height: 500px;
 ul {
 list-style: none;
 li {
 width: 50px;
 height: 50px;
 margin: 20px;
 float: left;
 line-height: 50px;
 text-align: center;
 .center {
 width: 156px;
 height: 40px;
 line-height: 40px;
 margin: 0 auto;
 #pp {
 display: block;
 text-align: center;
 margin-top: 40px;
 font-size: 35px;
 /style 

body排列

 div id="box" 
 h1 点名系统 /h1 
 div 
 input type="button" value="开始点名" id="btn" 
 input type="button" value="停止点名" id="btn2" 
 /div 
 span id="pp" /span 
 div id="dv" 
 /div 
 /div 

js代码

 script 
 function my$(id){
 return document.getElementById(id);

 //定义数组，存放数值
 var arr = ["卓子贤","梁图","袁绍思","张家磊","梁文龙","方志豪","曾勇强","陈文"];
 //先创建一个ul加入到名字为dv的div中
 var oul = document.createElement("ul"); 
 my$("dv").appendChild(oul);
 //接下来遍历arr数组，动态创建li元素并且加入到ul中，并且把数组变量动态写到li中
 for(var i=0;i arr.length;i++){
 oli = document.createElement("li");
 oul.appendChild(oli);
 oli.innerHTML = arr[i];
 //先获取到所有的li，为下面的应用css样式做铺垫
 var oli = oul.getElementsByTagName("li");
 var timer;//这里先定义一个变量，开启定时器再赋值，
 //为鼠标注册点击事件
 my$("btn"). unction (){
 clearInterval(timer);//在开启定时器之前先清除定时器，避免出现用户多次点击开启多个定时器而关不掉。
 //开启定时器并赋值给变量
 timer = setInterval(function (){
 var num = parseInt(Math.random()*arr.length);
 console.log(num);
 //这里遍历所有的li元素，在开启定时器之前先把所有的li的样式清除掉
 //如果这里不清除，那么所有的li在下一步都会全部应用上css样式，
 //全部都会高亮显示,无法实现排他效果
 for(var i=0;i oli.length;i++){
 oli[i].className = "";
 oli[num].className = "cor";
 //将生成的随机数动态显示到span中，将最后所选择的数组名显示到span中
 my$("pp").innerHTML = arr[num];
 //console.log(arr[num]);
 },100);
 //停止点名按钮。
 my$("btn2"). unction (){
 clearInterval(timer);
 /script 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。