zoukankan      html  css  js  c++  java

  • JavaScript编写简单的抽奖程序

    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;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;4em; background: #fc0;" onclick="setTimer()" />   
    100.                     <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;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;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;190px;border:1px solid red;font-size:25;" size="28" readonly/></td>   
    112.                         <td><input name="text3" type="text" id="1" style="height:30px;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;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="11em"></td>   
    125.                         <td><input id="set_number" type="button" value="设置" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;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;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编写简单的抽奖程序

  • 相关阅读:
    sprint2（第九天）
    sprint2 （第八天）
    sprint2（第七天）
    sprint2（第六天）
    sprint2（第四天）
    sprint2（第三天）
    sprint2（第二天）
    sprint 2（第一天）
    0621 第三次冲刺及课程设计
    0617 操作系统实验4 主存空间的分配和回收
  • 原文地址：https://www.cnblogs.com/swordxia/p/4489328.html
Copyright © 2011-2022 走看看