码迷,mamicode.com
首页 > Web开发 > 详细

js抽奖系统

时间:2015-12-27 20:21:45      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 

 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         var info = document.getElementById(info),
50             start= document.getElementById(start),
51             stop = document.getElementById(stop),
52             arr = [笔记本,佳能相机,3000元现金,惠普笔记本,3000元,ipone5],
53             time = null;
54         function move(){
55             var l = arr.length;
56             var random = Math.floor(Math.random()*l);
57             info.innerHTML = arr[random];
58         }
59         start.onclick = function(){
60             clearInterval(time);
61             //不能定义var。
62             time = setInterval(move,200);
63             start.classList.add(Over);
64         }
65         stop.onclick = function(){
66             clearInterval(time);
67             start.classList.remove(Over);
68             alert(info.innerHTML);
69         }
70     </script>
71 </body>
72 </html>

 

js抽奖系统

标签:

原文地址:http://www.cnblogs.com/qianduanjingying/p/5080602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!