JS-抽奖系统-实现原理

有本事中奖的,过来找我换红包!!哈哈!!

<meta charset="UTF-8">

<title>抽奖系统</title> <style type="text/css">

.wrap {
width: 300px;
margin: 20px auto;
text-align: center;
}

.box {
padding: 10px;
color: red;
font: bold 24px "微软雅黑";
border: 1px solid #FF7F50;
color: red;
margin: 20px auto;
}

input[type="button"] {
border: 1px solid #DC143C;
background-color: #FF6600;
padding: 5px 12px;
font: bold 16px "微软雅黑";
color: white;
cursor: pointer;
}

.box,
input[type="button"] {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}

input[type="button"].play {
background-color: brown;
border: 1px solid darkred;
}

</style>

<div class="wrap">
<div id="box" class="box">开始抽奖了!</div>
<input type="button" value="开始" id="play" />
<input type="button" value="结束" id="stop" />
</div>
 <script type="text/javascript">
			window.onload = function() {
				var title = document.getElementById('box'),
					play = document.getElementById('play'),
					stop = document.getElementById('stop'),
					arr = ['谢谢参与!', '一等奖', '谢谢参与!', '二等奖', '谢谢参与!', '三等奖', '特等奖', '谢谢参与!', '优秀奖', '参与奖', '谢谢参与!', '荣誉奖', '谢谢参与!', '辛苦奖', '谢谢参与!', '魅力奖', '谢谢参与!'], //思路出错的地方2,抽奖就是抽随机数,而不是一个i从0-7的加加加,最后只会是7的结果。
					trap = 0, //方便二次按回车时结束抽奖【一键多用!】
					timer = null; //思路出错的地方1,定时器要定义为全局变量
				//开始抽奖
				play.onclick = playCj; //因为需要多次引用,所以封装起来函数。
				//结束抽奖
				stop.onclick = stopCj;
				//封装开始抽奖函数
				function playCj() {
					clearInterval(timer);
					//设置定时器
					timer = setInterval(function() {
						var i = Math.floor(Math.random() * arr.length);
						//random生成的是0-1之间的随机数,拿这个例子举例来说,他需要生成的是0-7范围的随机数才能正确取出arr数组内的文字。因为数组长度是8,而生成的是0-1之间的小数点,再乘以8的话,最大也就是7.999999999,然后利用Math.floor()向下取整,去掉小数点之后的数,就可以得到自己的索引目标。
						title.innerHTML = arr[i];
					}, 30);
					play.className = 'play'; //更改样式直接用了一个class名字,这样js里省点代码。
				}
				//封装结束函数
				function stopCj() {
					play.className = '';
					clearInterval(timer);
					title.innerHTML = '谢谢参与!';
				}
				//键盘事件
				document.onkeyup = function(event) { //忘记先传一个event事件,因为没有一个具体的接受键盘事件的对象,所以用document
					event = event || window.event;
					//				console.log(event.keyCode);
									if(event.keyCode===13){//这里两个等于号或三个等于号都可以
										alert(trap)
										if(trap==0){//这里判断要用两个等于号,用三个等于号就是错误的了。因为是判断是不是等于,而一个等于号是赋值!!!注意了
											playCj();
											trap=1;
										}else{
											stopCj();
											trap=0;
										}
									}
				}
			}
http://www.imooc.com/video/2292

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

681
来自专栏博客园

WPF Binding学习(二)

  Binding作为数据的桥梁,连通业务逻辑层的对象(源对象)和UI的控件对象(目标对象)。在这座桥梁上,我们不仅可以控制在源对象与目标对象是双向通行还是单向...

1122
来自专栏小灰灰

cocos2dx-v3.4 2048(四):游戏逻辑的设计与实现

前言 ---- 2048的游戏逻辑比较简单,向四个方向移动单元格,若相邻的单元格数字相同,则合并成一个新的单元格,且数字为之前的两倍;若不同,则移动到目的方向上...

3986
来自专栏deepcc

emmet(Zen coding)前端写代码神器

3877
来自专栏向治洪

iOS 滚动视图的复用问题解决方案

##LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题...

25510
来自专栏hrscy

Unity - 在鼠标点击的位置放置对象

你可以使用函数实例化多个给定的游戏对象或预制对象。 Instantiate (Object Target, object’s position, object...

4132
来自专栏好好学java的技术栈

特别的520,送给特别的你们,还不来看看?

1212
来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

1091
来自专栏吾爱乐享

php学习之html的标签属性(二)

1502
来自专栏我的博客

Jquery学习第一天

1、jQuery优点 轻量级,强大的选择器,出色的DOM操作,可靠的事件处理,完善的Ajax,不污染的顶级变量,出色的浏览器兼容,链式操作,隐式迭代,行为层和结...

3728

扫码关注云+社区

领取腾讯云代金券