js实现课堂随机点名系统
更新时间:2019年11月21日 08:45:55 作者:一名正在努力的前端小白
这篇文章主要介绍了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 style="text-align:center">点名系统</h1> <div class="center"> <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").onclick=function (){ 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").onclick=function (){ clearInterval(timer); } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
这篇文章主要介绍了JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax的相关资料,具有参考借鉴价值,需要的朋友一起学习吧2016-05-05JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
这篇文章主要介绍了JavaScript引用类型之基本包装类型,结合实例形式分析了javascript中Boolean、Number和String三种基本包装类型的基本用法与相关操作注意事项,需要的朋友可以参考下2018-08-08JavaScript设计模式之原型模式(Object.create与prototype)介绍
这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下2014-12-12
最新评论