```bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 1000px;
height: 500px;
margin: 0 auto;
margin-top: 50px;
}
display: block;
width: 1000px;
height: 100px;
margin: 0 auto;
font-size: 24px;
}
.name {
width: 100px;
height: 100px;
float: left;
background-color:
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 100px;
color:
}
display: block;
text-align: center;
}
h1 {
text-align: center;
}
.sum {
width: 100px;
height: 100px;
float: left;
/* background-color:
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 100px;
color:
font-weight: 700;
background-image: url(2233_1.jpg);
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<input type="button" id="btn" value="抓一个小老弟" />
<script type="text/javascript">
//创造虚拟后台数据(自行创建,条数不限)
var arrs = [""];
//获取父元素
var boxNode = document.getElementById("box");
for (var i = 0; i < arrs.length; i++) {
//创建新元素
var divNode = document.createElement("div");
//写入名字
divNode.innerHTML = arrs[i];
//设置class名
divNode.className = "name";
//绑定父节点
boxNode.appendChild(divNode);
}
//点名
//获取点名键
var btn = document.getElementById("btn");
//绑定方法
btn.onclick = function() {
if (this.value === "抓一个小老弟") {
//启动定时器
timeId = setInterval(function() {
//清空所有颜色
for (var j = 0; j < arrs.length; j++) {
boxNode.children[j].className = "name";
}
//随机给色
var random = parseInt(Math.random() * arrs.length);
boxNode.children[random].className = "sum";
}, 100);
this.value = "抓到了";
} else {
//清除计时器
clearInterval(timeId);
this.value = "抓一个小老弟";
}
}
//获取存放时间的盒子
var spanNode = document.getElementById("span");
//调用时间
getTime();
setInterval(getTime, 1000);
function getTime() {
var day = new Date();
var year = day.getFullYear();
var month = day.getMonth() + 1;
var dat = day.getDay();
var hours = day.getHours();
var minitues = day.getMinutes();
var second = day.getSeconds();
spanNode.innerHTML = year + "-" + month + "-" + dat + " " + hours + ":" + minitues + ":" + second;
}
</script>
</body>
</html>