前端——JS之定时器的小案例(1)

定时器点名小案例(抽奖游戏也同理)&&详细注释

<!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>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值