用js定时器实现一个简单的抽奖程序

用js定时器使用简单的抽奖

---

样式如图所示，当点击开始按钮时，开始抽奖，当点击停止按钮时，抽奖结束，并且上面显示中奖的东西。

主要用到的技术是原生javascript中的定时器，当点击开始按钮的时候，触发定时器开发，当点击停止按钮的时候，关闭定时器。

javascript的代码如下：

<script type="text/javascript">
			window.onload = function(){
				let on = document.querySelector("#on");
				let off = document.querySelector("#off");
				let txt = document.getElementById("txt");
				var timer ;
				let arr = ["小人书","游戏机","谢谢惠顾","再来一次","看电影"];
				on.onclick = function(){
					clearInterval(timer);
					//每次点击开始按钮的时候，先关闭上一个定时器，防止定时器连续开启
					timer = setInterval(function(){
						let index = parseInt(Math.random()*arr.length);
						//由于数组的下标是从0开始的，于是设置0~4之间的随机数
						console.log(index);
						txt.innerHTML = arr[index];
					},50)
					
				};
				off.onclick = function(){
					clearInterval(timer);
				};
			};
		</script>

扩展知识：

在js中，求一个数的整数部分，使用parseInt()，注意，该方法不是Math中的方法，因此不需要在前方添加Math。

在js中，使用Math.random()可以随机的到0~1之间的随机数。因此想要计算1-10之间的随机数，为Math.random()10+1 。
计算m-n之间的随机数(m<n)，为Math.random()(n-m)+m。

js的定时器中有两个值，setInterval(function(){},1000)，其中第一个是将要执行的内容，可以是语句，也可以是函数，第二个值是执行之间的时间，单位为毫秒。

关闭定时器采用clearInterval()方法，括号里的值可以是任意值，包括under find和null。