《js事件探秘》学习——实现抽奖系统

最新推荐文章于 2022-07-24 20:51:41 发布

MMRS

最新推荐文章于 2022-07-24 20:51:41 发布

阅读量1k

点赞数

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/39959671

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习视频资源来自慕课网《js事件探秘》：http://www.imooc.com/learn/138

关键点总结：

抽奖系统的原理：

加一个定时器，不断生成随机数——把要抽的东西写在数组内，定时器隔一段时间生成一个随机数，根据随机数去把数据里对应的数找出来。

细节问题总结

1.每触发一次点击事件，会新开一个定时器，所以在触发事件之前，先调用clearInterval（timer）清空之前的定时器

2.Math.random()生成的数 >=0 && <1, 即浮点数,要产生在数组之间的整数，

采用公式 Math.random()*data.length 得到包括数组之间的 0——(length-1)的浮点数

然后调用 Math.floor(Math.random()*data.length) 取整即可得到数组 0——(length-1)之间的整数

3.键盘事件,onkeyup——按下键并释放，event.keyCode == 13表示按下“enter”键时

4.采用标志flag == 0 || flag == 1 来判断当前状态（抽奖或停止抽奖）

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		div{
			width:200px;
			height:40px;
			margin:0 auto;
			text-align:center;
			line-height:30px;
		}
		span{
			background-color:green;
			padding:8px 15px;
			color:#fff;
			cursor:pointer;
		}
		</style>
		<script type="text/javascript" src="luckDraw.js"></script>
	</head>
	<body>
		<div id="title" class="titlecss">开始抽奖啦！</div>
		<div>
			<span id="start">开始</span>
			<span id="stop">停止</span>
		</div>
	</body>
</html>

js代码：

/*****
抽奖系统的原理：
加一个定时器，不断生成随机数——把要抽的东西写在数组内，定时器隔一段时间生成一个随机数，根据随机数去把数据里对应的数找出来。

细节问题总结
1.每触发一次点击事件，会新开一个定时器，所以在触发事件之前，先调用clearInterval（timer）清空之前的定时器
2.Math.random()生成的数 >=0 && <1, 即浮点数,要产生在数组之间的整数，
  采用公式 Math.random()*data.length 得到包括数组之间的 0——(length-1)的浮点数
  然后调用 Math.floor(Math.random()*data.length) 取整即可得到 数组 0——(length-1)之间的整数
3.键盘事件,onkeyup——按下键并释放，event.keyCode == 13表示按下“enter”键时
4.采用标志flag == 0 || flag == 1 来判断当前状态（抽奖或停止抽奖）
  
******/

var data=["iPhone5","Ipad","三星笔记本","50元现金券","谢谢参与","摄像机","矿泉水一箱","美女一日约会","九寨沟三日游"];
var timer = null;

//flag用于判断是抽奖还是停止抽奖
var flag = 0;

window.onload = function(){
	
	  var start = document.getElementById("start"),
	      stop = document.getElementById("stop");

	//开始抽奖
	start.onclick = playFun;

	//停止抽奖
	stop.onclick = stopFun;

	//键盘事件,onkeyup——按下键并释放
	document.onkeyup = function(event){
		event = event || window.event;
		if(event.keyCode == 13){
			if(flag == 0){
				playFun();
				flag = 1;
			}else{
				stopFun();
				flag = 0;
			}
		}
	};
}

function playFun(){  //产生随机数
	var startbtn = document.getElementById("start");
	var title = document.getElementById("title");

	//原因：每点击一次开始按钮，会新开一个定时器
    //清除定时器，clearInterval(timer)，解决多次点击后产生随机数越来越快和定时器停不下来的bug
	clearInterval(timer);
	timer = setInterval(function(){
		
		//Math.random()生成的数 >=0 && <1, 即浮点数
		var random =Math.floor(Math.random()*data.length);
		title.innerHTML = data[random];

	},50);

	startbtn.style.background = "#999";
}

function stopFun(){  //停止抽奖——清除定时器即可
	var startbtn = document.getElementById("start");
	clearInterval(timer);
	startbtn.style.background = "green";
	
}

demo视图：

MMRS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《js事件探秘》学习——实现抽奖系统

抽奖系统的原理：加一个定时器，不断生成随机数——把要抽的东西写在数组内，定时器隔一段时间生成一个随机数，根据随机数去把数据里对应的数找出来。细节问题总结1.每触发一次点击事件，会新开一个定时器，所以在触发事件之前，先调用clearInterval（timer）清空之前的定时器2.Math.random()生成的数 >=0 && 采用公式 Math.random()*da
复制链接

扫一扫