最近用js做了一个简单年会抽奖系统

一念之间• 2019-01-15 02:53:05

当点击开始的时候五秒钟后怎么让他自动停止，过一秒钟后又自动开始就这样循环5次

...全文

753 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

空格- 2019-01-17

打赏
举报

楼上大佬可以带注释吗！初学者表示逻辑有点乱

天际的海浪 2019-01-15

打赏
举报


<!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 #006;
	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","名字21","名字22","名字23","名字24","名字25","名字26","名字27","名字28","名字29","名字30"];
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] + "<br>";
		nameArr.splice(index,1);
		listnum--;
		timer2 = setTimeout(startrun, 1000);
	}, 5000);
}
</script>
</body>
</html>