简单的随机年会抽奖

蒋高超
2023-12-01

<!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>
 类似资料: