JS-抽奖系统-实现原理
2016-09-25 17:57
267 查看
<meta charset="UTF-8">
<title>抽奖系统</title>
<style type="text/css">
html
<script type="text/javascript">
</script>
http://www.imooc.com/video/2292
<title>抽奖系统</title>
<style type="text/css">
<div class="wrap"> <div id="box" class="box">开始抽奖了!</div> <input type="button" value="开始" id="play" /> <input type="button" value="结束" id="stop" /> </div>
html
<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; } } } }
</script>
http://www.imooc.com/video/2292
相关文章推荐
- js组件SlotMachine实现图片切换效果制作抽奖系统
- 慕课网题目之js实现抽奖系统功能
- js组件SlotMachine实现图片切换效果制作抽奖系统
- JS实现一个简单的抽奖系统
- [DSP开发]嵌入式系统中LCD驱动的实现原理
- 用户层下拦截系统api的原理与实现
- 嵌入式系统中LCD驱动的实现原理
- 基于逻辑运算的简单权限系统(原理,设计,实现) VBS 版
- LIS系统通讯程序原理与实现
- JS实现在线考试系统并立即评分
- 嵌入式系统中LCD驱动的实现原理
- 用户层下拦截系统api的原理与实现
- 用js实现的检测浏览器和系统的函数
- 也晒晒我的RBAC系统(二):系统实现原理简介
- 网站JS源码1--产品分类下拉菜单实现原理
- [转]嵌入式系统中LCD驱动的实现原理
- 基于逻辑运算的简单权限系统(实现) JS 版
- js树型菜单的实现原理
- 基于逻辑运算的简单权限系统(实现) JS 版
- IE下,纯js掉用系统activex实现文件下载。