今天写了个简单的点名器，预览地址：http://www.chenjie.info/demo/rollcall.html 。主要使用了定时器来实现，代码如下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:"微软雅黑";
}
#mingqi{
height:250px;
width:400px;
margin:50px auto;
text-align:center;
border:5px double blue;
}
#mingqi p{
border:2px solid purple;
height:80px;
line-height:80px;
width:150px;
margin:40px auto;
}
#mingqi div button{
width:80px;
height:50px;
}
</style>
</head>
<body>
<div id="mingqi">
<p>点名器</p>
<div>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var xh=null;
var list=['小柳','小五'];
//标记是否已经开始循环，防止叠加定时
var flag=false;
function start(){
var p=document.getElementsByTagName('p')[0];
if(!flag){
xh=setInterval(function(){
var num=Math.floor(Math.random()*list.length);
p.innerHTML=list[num];
},50);
flag=true;
}
}
function stop(){
clearInterval(xh);
var p=document.getElementsByTagName('p')[0];
p.innerHTML="<div style='color:red'>"+p.innerHTML+"</div>";
flag=false;
}
</script>
</body>
</html>