<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>年会抽奖</title>
<style type="text/css">
#textbox {
border: 3px solid #ccc;
width: 300px;
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="textbox">-----</div>
<input type="button" value="开始" onclick="startrun();" />
<br>获奖名单:<div id="list"></div>
<script type="text/javascript">
var nameArr = ["名字01","名字02","名字03","名字04","名字05","名字06","名字07","名字08","名字09","名字10","名字11","名字12","名字13","名字14","名字15","名字16","名字17","名字18","名字19","名字20"];
var listnum = 5;
var timer, timer2;
function startrun() {
if (listnum<=0) return;
clearInterval(timer);
clearTimeout(timer2);
var index;
timer = setInterval(function(){
index = Math.floor(Math.random()*nameArr.length);
document.getElementById("textbox").innerHTML = nameArr[index];
}, 30);
timer2 = setTimeout(function(){
clearInterval(timer);
document.getElementById("list").innerHTML += nameArr[index] + ",";
nameArr.splice(index,1);
listnum--;
timer2 = setTimeout(startrun, 1000);
}, 2000);
}
</script>
</body>
</html>