JS抽奖程序

在经典论坛看到一个抽奖程序的求助，趁着自己有空，也写一个。有点懒，用了人家的html和css。

想象在一个活动中，给每个进场的人员按顺序发标有001、002……这样的卡片，这样就可以知道参与抽奖的人员有多少。抽奖可能分一等奖、二等奖等，这里我就不管，只是每个抽中的号码，不会出现在下次的抽奖中，就是每个人最多只能获一次奖。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>抽奖程序</title>
 6 <style type="text/css">
 7 <!--
 8 body {margin:0px;padding:0px;background-color: #000;text-align:center;}
 9 #oknum{color:#f33;font-size:168px;line-height:168px;width:678px;height:168px;margin-left:auto;margin-right:auto;margin-top:68px;text-align:center;background:#121212; font-family:Arial, Helvetica, sans-serif;}
10 #finish{color:red;width:648px;height:168px;margin-left:auto;margin-right:auto;margin-top:1px;text-align:left;background:#121212; font-size:36px; padding:15px; font-family:Arial, Helvetica, sans-serif; word-spacing:15px;}
11 #start{width:680px;height:168px;margin-left:auto;margin-right:auto;margin-top:1px;text-align:center; font-family:微软雅黑; }
12 #start a{color:#868686;font-size:86px;line-height:168px;width:338px;height:168px;background:#121212;float:left;margin:1px;text-decoration: none;}
13 #start a:hover{color:#868686;background-color: #2E2E2E;}
14 -->
15 </style>
16 </head>
17 <body>
18 <div id="oknum"></div> 
19 <div id="start"><a href="#Action">开始</a><a href="#Stop">停止</a></div><div style="clear:both;"></div>
20 <div id="finish"></div>
21 <script type="text/javascript">
22 var totalNum = 200;  //参与抽奖总人数
23 var a = [];
24 var i;
25 
26 //初始化数组
27 for(i=1; i<=totalNum; i++) {
28     if(i < 10) {
29         a.push("00"+i);
30     }
31     else if(i < 100 && i>=10) {
32         a.push("0"+i);
33     }
34     else if(i>=100 && i<1000) {
35         a.push(i);
36     }
37 }
38 
39 function startDraw() {
40     var n = 0;
41     flow();
42     function flow() {
43         if(n===a.length) { n = 0; }
44         document.getElementById("oknum").innerHTML = a[n];
45         n++;
46         handle = setTimeout(flow,10);
47     }
48 }
49 function stopDraw() {
50     clearTimeout(handle);
51     var oknum = document.getElementById("oknum").innerHTML;
52     document.getElementById("finish").innerHTML += oknum + " ";
53     for(i=0; i<a.length; i++) {
54         if(a[i] === oknum) {
55             a.splice(i,1);  
56         }
57     }
58 }
59 document.getElementById("start").getElementsByTagName("a")[0].onclick = startDraw;
60 document.getElementById("start").getElementsByTagName("a")[1].onclick = stopDraw;
61 </script>
62 </body>
63 </html>
posted @ 2012-06-29 14:30  长风freedom  阅读(555)  评论(0)    收藏  举报