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>
