js抽奖系统

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>抽象系统</title>
 6     <style type="text/css">
 7     div{
 8         margin:20px auto;
 9         font-size: 20px;
10         color:#f00;
11         font-weight: bold;
12         font-family: "微软雅黑";
13         text-align: center;
14     }
15     .btnwrap{
16         width:200px;
17         margin: 0 auto;
18     }
19     button{
20         width:80px;
21         height:35px;
22         font-size: 16px;
23         border:1px solid #fff;
24         border-radius:8px;
25         background-color: #3983de;
26         color:#fff;
27         margin:0 10px;
28         float:left;
29         outline: none;
30     }
31     .Over{
32         background-color: #888;
33     }
34     </style>
35 </head>
36 <body>
37     <div id="info">开始抽奖</div>
38     <div class="btnwrap">
39         <button id="start">开 始</button>
40         <button id="stop">停 止</button>
41     </div>
42     <script type="text/javascript">
43         /**
44          * 思路：1、首先定义变量。
45          * 2、定义一个数组，存放抽奖数据
46          * 3、定义一个函数。
47          * @type {[type]}
48          */
49         (function(d){
50             var info = d.getElementById('info'),
51                 start= d.getElementById('start'),
52                 stop = d.getElementById('stop'),
53                 arr = ['笔记本','佳能相机','3000元现金','惠普笔记本','3000元','ipone5'],
54                 time = null;
55             function move(){
56                 var l = arr.length;
57                 var random = Math.floor(Math.random()*l);
58                 info.innerHTML = arr[random];
59             }
60             start.onclick = function(){
61                 clearInterval(time);
62                 //不能定义var。
63                 time = setInterval(move,100);
64                 start.classList.add('Over');
65             }
66             stop.onclick = function(){
67                 clearInterval(time);
68                 start.classList.remove('Over');
69                 alert(info.innerHTML);
70             }
71         })(document)
72     </script>
73 </body>
74 </html>

 

posted @ 2015-12-27 18:58  黑客PK  阅读(1825)  评论(0)    收藏  举报