JavaScript编写简单的抽奖程序

开发 前端
某公司年终抽奖,需要有如下功能:1)可以根据实际情况设置到场人数的最大值。2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上。3)在界面里显示全部奖项获奖人编号。4)不重复获奖。5)不会因为输入错误而导致抽奖结果异常。
1.需求说明

某公司年终抽奖,需要有如下功能

1)可以根据实际情况设置到场人数的***值

2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上

3)在界面里显示全部奖项获奖人编号

4)不重复获奖

5)不会因为输入错误而导致抽奖结果异常。

2.代码呈上

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">   
  2. <html>   
  3. <head>   
  4. <title>某公司周年庆抽奖</title>   
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  6. <script language="javascript">   
  7.     var timer;   
  8.     var flag = new Array(100);   
  9.     var existingnum = new Array(100);   
  10.     var clickTimes = 0;   
  11.     var randnum;   
  12.     var cellnum =1;   
  13.     var mobile;   
  14.     var num ;   
  15.     function check_input(){     
  16.         var input = document.getElementById("real_num").value;   
  17.         var re = /^[1-9]+[0-9]*]*$/;   
  18.         if (!re.test(input)){     
  19.             alert("请输入正整数");     
  20.             window.location.href=window.location.href;      
  21.             return false;     
  22.          }   
  23.    
  24.     }     
  25.    
  26.     //get the random numbers from the mobile array every 0.05s   
  27.     function setTimer(){   
  28.         timer = setInterval("getRandNum();",50);   
  29.         document.getElementById("start").disabled = true;   
  30.         document.getElementById("end").disabled = false;   
  31.     }   
  32.    
  33.     function getRandNum(){   
  34.         document.getElementById("result").value = mobile[GetRnd(0,num)];   
  35.     }   
  36.    
  37.     function GetRnd(min,max){    
  38.         randnum = parseInt(Math.random()*(max-min+1));   
  39.         return randnum;   
  40.     }   
  41.    
  42.     //------------------------------------------------   
  43.    
  44.     //turn the input's running down   
  45.     function clearTimer(){   
  46.         noDupNum();   
  47.         clearInterval(timer);   
  48.         document.getElementById("start").disabled = false;   
  49.         document.getElementById("end").disabled = true;   
  50.     }   
  51.     // Re defined array:change the length of the array and delete the checked one   
  52.     function noDupNum(){   
  53.         mobile.removeEleAt(randnum);   
  54.         var o = 0;   
  55.         for(p=0; p<mobile.length;p++){   
  56.             if(typeof mobile[p]!="undefined"){   
  57.                 mobile[o] = mobile[p];   
  58.                 o++;   
  59.             }   
  60.         }   
  61.         num = mobile.length-1;   
  62.      }   
  63.    
  64.      function setValues(){   
  65.         document.getElementById(cellnum).value = document.getElementById("result").value ;   
  66.         cellnum++;   
  67.     }   
  68.    
  69.     function set_array(){   
  70.         var real_num = document.getElementById("real_num").value ;   
  71.         mobile= new Array(real_num);   
  72.         var o = 0;   
  73.         for(i=1; i<=real_num;i++){   
  74.             mobile[o] = i;   
  75.             o++;   
  76.         }   
  77.         num = mobile.length-1;   
  78.         document.getElementById("set_number").disabled = true;   
  79.     }   
  80.        
  81.        
  82.        
  83.        
  84.     Array.prototype.removeEleAt = function(dx){   
  85.         if(isNaN(dx)||dx>this.length){return false;}   
  86.             this.splice(dx,1);   
  87.         }   
  88. </script>   
  89. </head>   
  90. <body>   
  91.     <center>   
  92.         <div id="main">   
  93.             <div>   
  94.                 <h1>获奖小伙伴</h1>   
  95.                 <p>   
  96.                     <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-size:120;" readonly/>   
  97.                 </p>   
  98.                 <p>   
  99.                     <input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="setTimer()" />   
  100.                     <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/>   
  101.                 </p>   
  102.                 <p><strong>一等奖(1名)</strong></p>   
  103.                 <table width="190" height="30" border="1">   
  104.                     <tr>   
  105.                         <td><input name="text1" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td>   
  106.                     </tr>   
  107.                 </table>   
  108.                 <p>二等奖(2名)</p>   
  109.                 <table width="380" height="30" border="1">   
  110.                     <tr>   
  111.                         <td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td>   
  112.                         <td><input name="text3" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td>   
  113.                     </tr>   
  114.                 </table>   
  115.             </div>   
  116.         </div>   
  117.         <p></p>   
  118.         <p></p>   
  119.         <div id="setter" style="border:1px solid;width:45em">   
  120.             <h3>系统设置</h3>   
  121.             <table width="300" height="30" border="1">   
  122.                     <tr>   
  123.                         <td>活动人数</td>   
  124.                         <td><input type="text" id="real_num" style="width:11em"></td>   
  125.                         <td><input id="set_number" type="button" value="设置" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="check_input();set_array();"/></td>   
  126.                     </tr>   
  127.                     <tr>   
  128.                            
  129.                     </tr>   
  130.             </table>   
  131.             <br/>   
  132.             <input id="set_number" type="button" value="重新开始抽奖" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:45em;height: 3em;background: #fc0;"  onclick="window.location.href=window.location.href;"/>   
  133.             <p></p>   
  134.         </div>   
  135.     <center>   
  136. </body>   
  137. </html>   

 

3.丑陋截图

我很丑,但是我很温柔~

 JavaScript编写简单的抽奖程序


 

 

责任编辑:王雪燕 来源: hellobeifeng的博客
相关推荐

2010-03-09 10:49:35

python简单应用

2021-02-05 16:03:48

JavaScript游戏学习前端

2011-06-27 13:57:42

JavaScript

2011-11-23 09:06:00

2014-11-25 10:03:42

JavaScript

2016-11-30 18:35:03

JavaScript

2012-12-17 13:51:22

Web前端JavaScriptJS

2022-06-07 09:30:35

JavaScript变量名参数

2012-05-10 15:21:50

JavaScript

2017-05-08 10:38:36

PythonJavaScriptWIFI

2014-04-21 10:14:52

PromisesJavaScript

2023-05-22 15:35:10

JavaScriptWeb开发

2013-04-15 09:02:43

JavaScriptJS

2009-06-24 15:00:39

Javascript代

2021-06-09 10:45:12

JavaScript开发 编程

2022-10-21 14:21:46

JavaScript笔记技能

2009-12-17 16:50:54

Ruby简单编写

2022-06-21 09:26:21

Shell脚本JavaScript

2011-03-04 10:11:09

JavascriptAPI

2022-06-22 10:07:07

JavaScript枚举
点赞
收藏

51CTO技术栈公众号