用js实现一个随机点名

html代码

<h1>随机点名系统</h1>
<div id="time"></div>
<div id="box">
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>王磊</li>
<li>张强</li>
<li>张伟</li>
<li>王伟</li>
<li>李娜</li>
<li>王静</li>
<li>王丽</li>
<li>李强</li>
<li>王敏</li>
</ul>
</div>
<input type="button" value="开始" id="inp">

css代码

<style>
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
margin-top: 30px;
}
#time{
position: absolute;
top: 150px;
right: 100px;
}
#box{
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 200px;
}
li{
width: 60px;
height: 20px;
float: left;
background-color: palevioletred;
list-style: none;
padding: 20px;
margin: 5px;
text-align: center;
}
#inp{
width: 100px;
height: 50px;
position: absolute;
top: 400px;
left: 50%;
margin-left:-50px;
}
</style>

这里引用了一个公共js

// 通过id名获取的元素
function my$(id) {
return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
return document.getElementsByTagName(element);
}

js代码

<script src="common.js"></script>
<script>
window.onload=function(){
//获取时间
function clock(){
var dt=new Date();
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
function bu(i){
return i<10? "0"+i:i;
}
my$("time").innerText=year+"-"+bu(month)+"-"+bu(day)+"     "+bu(h)+":"+bu(m)+":"+bu(s);
}
clock();//当页面加载完毕时,初始化一次
setInterval(clock,1000);
//给按钮绑定点击事件
var lis=document.getElementsByTagName("li");//获取所有的li
console.log(lis);
var flag=true;//给一个开关
var timeId;
my$("inp").onclick=function(){
if (flag){
flag=false;
my$("inp").value="停止";
timeId=setInterval(function(){
var num=parseInt(Math.random()*lis.length);//获取li索引随机数
for (var i=0;i<lis.length;i++){//遍历
lis[i].style.backgroundColor="";//排他功能
}
lis[num].style.backgroundColor="red";//使每一个随机的li背景色为红色
},200)
}else{
flag=true;
my$("inp").value="开始";
clearInterval(timeId);
}

}

}

</script>