您的位置：首页 > Web前端 > JavaScript

js实现课堂随机点名系统

2019-11-22 12:13 876 查看

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 随机点名点名系统

相关文章推荐

新的分享

章节导航