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">

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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