效果图
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<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>
<script>
function my$(id) {
return document.getElementById(id);
}
var arr = ["aa", "bb", "cc", "dd", "ee", "ff", "jj", "hh", "rr", "gg", "kk", "ll", "mm"];
var oul = document.createElement("ul");
my$("dv").appendChild(oul);
for (var i = 0; i < arr.length; i++) {
oli = document.createElement("li");
oul.appendChild(oli);
oli.innerHTML = arr[i];
}
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);
for (var i = 0; i < oli.length; i++) {
oli[i].className = "";
}
oli[num].className = "cor";
my$("pp").innerHTML = arr[num];
}, 100);
}
my$("btn2").onclick = function () {
clearInterval(timer);
}
</script>
</body>
</html>