定时器点名小案例(抽奖游戏也同理)&&详细注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="btn">
<button id="star">开始</button>
<button id="stop">停止</button>
</div>
<div id="conter" >
</div>
</div>
<script>
//声明变量,把定时器赋值给timer 方便清除定时器
var timer;
// 把全部名字存在数组中
var java14=['圳章','陈大志','余泽敏','吕先定','黄孔钧','潘家葆','吴庭','严庆智','赵辉','覃文龙','黄锦渝','訾海','何一轩','刘强','覃爱的','张是','雷常程','黄家常','樊任','何仕奎','陈楚天','林杰成','刁强','黄富小','符为显','杨浩栋','陆扫荡彬','大d楠','谢为','姚全额杰','潘岳','吴于','冯斯','邱学强','林表','侯良中','俞霖','杨we','林为','谢定时','陈诗题','狄海霞','关尧斌','问琪']
// 写一个一个函数,把document.getElementById()封装起来,方便下次直接调用函数就可以
function aa(a){
return document.getElementById(a);
}
// 创建一个函数获取数组的索引值,通过索引值把数组的值赋值给conter这个id的标签,就是让这些名字显示在网页上
function test(){
//获取索引值,
var num =parseInt(Math.random()*java14.length)
// 获取到的索引值,通过索引值获取到数组的值,之后把数组的值赋值给conter这个id的标签
document.getElementById('conter').innerHTML=java14[num]
}
// 创建一个函数 把定时器封装起来,等下次直接调用就可以 ,不用重新写。
function go(){
// 把定时器赋值给timer 方便清除定时器
timer=setInterval(test,1000)
}
// 创建一个点击事件
aa('star').onclick=function(){
// 使用定时器之前需要先清除定时器,因为定时器会叠加 ,当连续开启定时器的时候,速度会翻倍,
//也停不下来。在这里效果就是当连续点击开始这个按钮,速度变快,
//并且点击停止 不能停下来,这就是定时器叠加,所以使用定时器之前需要先清除定时器
clearInterval(timer)//清除定时器
go();//调用定时器
}
//当点击到停止按钮的时候清除按钮就不会动了
aa('stop').onclick=function(){
clearInterval(timer)
}
</script>
</body>
</html>