自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript編寫簡單的抽獎程序

開發(fā) 前端
某公司年終抽獎，需要有如下功能:1）可以根據(jù)實際情況設(shè)置到場人數(shù)的最大值。2） 點擊“開始”，大屏幕滾動，點擊“停止”，獲獎?wù)叩木幪柍霈F(xiàn)在大屏幕上。3）在界面里顯示全部獎項獲獎人編號。4）不重復(fù)獲獎。5）不會因為輸入錯誤而導(dǎo)致抽獎結(jié)果異常。
1.需求說明

某公司年終抽獎，需要有如下功能

1）可以根據(jù)實際情況設(shè)置到場人數(shù)的***值

2） 點擊“開始”，大屏幕滾動，點擊“停止”，獲獎?wù)叩木幪柍霈F(xiàn)在大屏幕上

3）在界面里顯示全部獎項獲獎人編號

4）不重復(fù)獲獎

5）不會因為輸入錯誤而導(dǎo)致抽獎結(jié)果異常。

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("請輸入正整數(shù)");     
  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>系統(tǒng)設(shè)置</h3>   
  121.             <table width="300" height="30" border="1">   
  122.                     <tr>   
  123.                         <td>活動人數(shù)</td>   
  124.                         <td><input type="text" id="real_num" style="width:11em"></td>   
  125.                         <td><input id="set_number" type="button" value="設(shè)置" 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編寫簡單的抽獎程序


 

 

責(zé)任編輯：王雪燕 來源： hellobeifeng的博客
JavaScriipt抽獎程序
相關(guān)推薦

2010-03-09 10:49:35

python簡單應(yīng)用

2021-02-05 16:03:48

JavaScript游戲?qū)W習(xí)前端

2011-06-27 13:57:42

JavaScript

2011-11-23 09:06:00

2012-05-10 15:21:50

JavaScript

2022-06-07 09:30:35

JavaScript變量名參數(shù)

2016-11-30 18:35:03

JavaScript

2014-11-25 10:03:42

JavaScript

2012-12-17 13:51:22

Web前端JavaScriptJS

2017-05-08 10:38:36

PythonJavaScriptWIFI

2009-12-17 16:50:54

Ruby簡單編寫

2021-06-09 10:45:12

JavaScript開發(fā) 編程

2009-06-24 15:00:39

Javascript代

2022-10-21 14:21:46

JavaScript筆記技能

2023-05-22 15:35:10

JavaScriptWeb開發(fā)

2014-04-21 10:14:52

PromisesJavaScript

2013-04-15 09:02:43

JavaScriptJS

2022-06-21 09:26:21

Shell腳本JavaScript

2010-08-20 13:34:12

IEFirefoxJavascript

2011-03-04 10:11:09

JavascriptAPI
點贊
收藏

51CTO技術(shù)棧公眾號