实现效果图为：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p2{
font-size: 28px;
/*margin: 0px auto;*/
margin-left: 260px;
}
#p1{
float: right;
font-size: 15px;
color: red;
margin-top: 15px;
}
#one{
width: 660px;
height: 400px;
/*border: 1px solid red;*/
background-color: #FAEBD7;
margin: 0px auto;
}
#all{
width: 660px;
height: 300px;
/*border: 1px solid aquamarine;*/
}
.dianming{
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 10px;
background-color: gray;
display: inline-block;
text-align: center;
margin-top:15px;
}
input{
height: 35px;
margin-left: 300px;
}
</style>
<script type="text/javascript">
var div;
var show;
// var btn
window.onload = function(){
setInterval(function aa(){
var p = document.getElementById("p1");
var data = new Date();
p.innerHTML=data.toLocaleString();
},1000)
// function aa(){
// var p = document.createElement("p");
// var date = new Date();
// pp.innerHTML=date.toLocaleString();
// }
// window.setInterval("aa()",1000)
var a = ["草","楠","玉","雨","华","李威","闯","华","奎","玲","峰","琦","龙","丽","红","a","c","v"];
// function dianming(){
for (var i=0;i<a.length;i++) {
div= document.createElement("div");
var all = document.getElementById("all");
all.appendChild(div);
div.innerHTML=a[i];
div.className="dianming";
}
// }
// dianming();
//
var btn= document.getElementById("btn");
btn.onclick=function(){
if(this.value==="开始"){
show=setInterval(function (){
div.style.backgroundColor="gray";
var index = parseInt(Math.random()*a.length);
div = document.getElementsByClassName("dianming")[index];
div.style.backgroundColor="red";
},10)
this.value="暂停";
}else{
clearInterval(show);
this.value="开始";
}
}
}
// btn.onclick =setInterval("show()",10);
</script>
</head>
<body>
<div id="one">
<span id="p2">点名系统</span>
<span id="p1"></span>
<br />
<div id="all"></div>
<input type="button" value="开始" id="btn"/>
</div>
</body>
</html>