• 用Javascript轻松制作一套简单的抽奖系统


      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   
      8 // global variables  
      9 var timer; 
     10 var flag = new Array(100); 
     11 var existingnum = new Array(100); 
     12 var clickTimes = 0; 
     13 var randnum; 
     14 var cellnum =1; 
     15 var mobile = new Array(); 
     16 // set data here!! 
     17 mobile[0]=13020000100; 
     18 mobile[1]=13020000101; 
     19 mobile[2]=13020000102; 
     20 mobile[3]=13020000103; 
     21 mobile[4]=13020000104; 
     22 mobile[5]=13020000105; 
     23 mobile[6]=13020000106; 
     24 mobile[7]=13020000107; 
     25 mobile[8]=13020000108; 
     26 mobile[9]=13020000109; 
     27 mobile[10]=13020000110; 
     28 mobile[11]=13020000111; 
     29 mobile[12]=13020000112; 
     30 mobile[13]=13020000113; 
     31 mobile[14]=13020000114; 
     32 mobile[15]=13020000115; 
     33 
     34 
     35 mobile[16]=13020000116; 
     36 mobile[17]=13020000117; 
     37 mobile[18]=13020000118; 
     38 mobile[19]=13020000119; 
     39 mobile[20]=13020000120; 
     40 mobile[21]=13020000121; 
     41 mobile[22]=13020000122; 
     42 mobile[23]=13020000123; 
     43 mobile[24]=13020000124; 
     44 mobile[25]=13020000125; 
     45 mobile[26]=13020000126; 
     46 mobile[27]=13020000127; 
     47 mobile[28]=13020000128; 
     48 mobile[29]=13020000129; 
     49 mobile[30]=13020000130; 
     50 mobile[31]=13020000131; 
     51 mobile[32]=13020000132; 
     52 mobile[33]=13020000133; 
     53 mobile[34]=13020000134; 
     54 mobile[35]=13020000135; 
     55 mobile[36]=13020000136; 
     56 mobile[37]=13020000137; 
     57 mobile[38]=13020000138; 
     58 mobile[39]=13020000139; 
     59 mobile[40]=13020000140; 
     60 mobile[41]=13020000141; 
     61 mobile[42]=13020000142; 
     62 mobile[43]=13020000143; 
     63 mobile[44]=13020000144; 
     64 mobile[45]=13020000145; 
     65 mobile[46]=13020020146; 
     66 var num = mobile.length-1; 
     67 function getRandNum(){ 
     68 document.getElementById("result").value = mobile[GetRnd(0,num)]; 
     69 } 
     70 function start(){ 
     71 clearInterval(timer); 
     72 timer = setInterval('change()',50);  
     73 } 
     74 function ok(){ 
     75 clearInterval(timer); 
     76 } 
     77 function GetRnd(min,max){ 
     78   
     79 randnum = parseInt(Math.random()*(max-min+1)); 
     80 return randnum; 
     81 } 
     82 function setTimer(){ 
     83  timer = setInterval("getRandNum();",10); 
     84  document.getElementById("start").disabled = true; 
     85  document.getElementById("end").disabled = false; 
     86 } 
     87 function clearTimer(){ 
     88  noDupNum(); 
     89  clearInterval(timer); 
     90  document.getElementById("start").disabled = false; 
     91  document.getElementById("end").disabled = true; 
     92   
     93 } 
     94 
     95 
     96 function noDupNum(){ 
     97  // to remove the selected mobile phone number 
     98  mobile.removeEleAt(randnum); 
     99   
    100  // to reorganize the mobile number array!! 
    101  var o = 0; 
    102  for(p=0; p<mobile.length;p++){ 
    103  if(typeof mobile[p]!="undefined"){ 
    104  mobile[o] = mobile[p]; 
    105  o++; 
    106  } 
    107  } 
    108  num = mobile.length-1; 
    109  } 
    110 // method to remove the element in the array 
    111 Array.prototype.removeEleAt = function(dx) 
    112  { 
    113  if(isNaN(dx)||dx>this.length){return false;} 
    114  this.splice(dx,1); 
    115  } 
    116 // set mobile phone numbers to the table cell  
    117 function setValues(){ 
    118  document.getElementById(cellnum).value = document.getElementById("result").value ; 
    119  cellnum++; 
    120  } 
    121 </script> 
    122 </head> 
    123 <body> 
    124 <center> 
    125 <div> </div> 
    126 <div id="main"> 
    127  <div> 
    128  <h1>中奖号码</h1> 
    129   
    130  <p> 
    131  <input id="result" type="text" size="30" style="height:130px;800px;border:2px solid red;font- 
    132 size:120;" readonly/></p> 
    133  <p> 
    134  <input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000  
    135 #aaa;4em; background: #fc0;" onclick="setTimer()" /> 
    136  <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000  
    137 #aaa;4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/> 
    138 </p> 
    139  <p><strong>一等奖(10名)</strong></p> 
    140  <table width="946" height="79" border="1"> 
    141  <tr> 
    142  <td><input name="text36" type="text" id="36" style="height:30px;190px;border:1px solid red;font- 
    143 size:25;" size="28" readonly/></td> 
    144  <td><input name="text37" type="text" id="37" style="height:30px;190px;border:1px solid red;font- 
    145 size:25;" size="20" readonly/></td> 
    146  <td><input name="text38" type="text" id="38" style="height:30px;190px;border:1px solid red;font- 
    147 size:25;" size="20" readonly/></td> 
    148  <td><input name="text39" type="text" id="39" style="height:30px;190px;border:1px solid red;font- 
    149 size:25;" size="20" readonly/></td> 
    150  <td><input name="text40" type="text" id="40" style="height:30px;190px;border:1px solid red;font- 
    151 size:25;" size="20" readonly/></td> 
    152  </tr> 
    153  <tr> 
    154  <td><input name="text41" type="text" id="41" style="height:30px;190px;border:1px solid red;font- 
    155 size:25;" size="28" readonly/></td> 
    156  <td><input name="text42" type="text" id="42" style="height:30px;190px;border:1px solid red;font- 
    157 size:25;" size="20" readonly/></td> 
    158  <td><input name="text43" type="text" id="43" style="height:30px;190px;border:1px solid red;font- 
    159 size:25;" size="20" readonly/></td> 
    160  <td><input name="text44" type="text" id="44" style="height:30px;190px;border:1px solid red;font- 
    161 size:25;" size="20" readonly/></td> 
    162  <td><input name="text45" type="text" id="45" style="height:30px;190px;border:1px solid red;font- 
    163 size:25;" size="20" readonly/></td> 
    164  </tr> 
    165  </table> 
    166  <p>二等奖(15名)</p> 
    167  <table width="951" height="88" border="1"> 
    168  <tr> 
    169 
    170 
    171  <td><input name="text21" type="text" id="21" style="height:30px;190px;border:1px solid red;font- 
    172 size:25;" size="28" readonly/></td> 
    173  <td><input name="text22" type="text" id="22" style="height:30px;190px;border:1px solid red;font- 
    174 size:25;" size="20" readonly/></td> 
    175  <td><input name="text23" type="text" id="23" style="height:30px;190px;border:1px solid red;font- 
    176 size:25;" size="20" readonly/></td> 
    177  <td><input name="text24" type="text" id="24" style="height:30px;190px;border:1px solid red;font- 
    178 size:25;" size="20" readonly/></td> 
    179  <td><input name="text25" type="text" id="25" style="height:30px;190px;border:1px solid red;font- 
    180 size:25;" size="20" readonly/></td> 
    181  </tr> 
    182  <tr> 
    183  <td><input name="text26" type="text" id="26" style="height:30px;190px;border:1px solid red;font- 
    184 size:25;" size="28" readonly/></td> 
    185  <td><input name="text27" type="text" id="27" style="height:30px;190px;border:1px solid red;font- 
    186 size:25;" size="20" readonly/></td> 
    187  <td><input name="text28" type="text" id="28" style="height:30px;190px;border:1px solid red;font- 
    188 size:25;" size="20" readonly/></td> 
    189  <td><input name="text29" type="text" id="29" style="height:30px;190px;border:1px solid red;font- 
    190 size:25;" size="20" readonly/></td> 
    191  <td><input name="text30" type="text" id="30" style="height:30px;190px;border:1px solid red;font- 
    192 size:25;" size="20" readonly/></td> 
    193  </tr> 
    194  <tr> 
    195  <td><input name="text31" type="text" id="31" style="height:30px;190px;border:1px solid red;font- 
    196 size:25;" size="28" readonly/></td> 
    197  <td><input name="text32" type="text" id="32" style="height:30px;190px;border:1px solid red;font- 
    198 size:25;" size="20" readonly/></td> 
    199  <td><input name="text33" type="text" id="33" style="height:30px;190px;border:1px solid red;font- 
    200 size:25;" size="20" readonly/></td> 
    201  <td><input name="text34" type="text" id="34" style="height:30px;190px;border:1px solid red;font- 
    202 size:25;" size="20" readonly/></td> 
    203  <td><input name="text35" type="text" id="35" style="height:30px;190px;border:1px solid red;font- 
    204 size:25;" size="20" readonly/></td> 
    205  </tr> 
    206  </table> 
    207  <p>三等奖(20名)</p> 
    208  <table width="961" height="102" border="1"> 
    209  <tr> 
    210  <td><input name="text1" type="text" id="1" style="height:30px;190px;border:1px solid red;font- 
    211 size:25;" size="28" readonly/></td> 
    212  <td><input name="text2" type="text" id="2" style="height:30px;190px;border:1px solid red;font- 
    213 size:25;" size="20" readonly/></td> 
    214  <td><input name="text3" type="text" id="3" style="height:30px;190px;border:1px solid red;font- 
    215 size:25;" size="20" readonly/></td> 
    216  <td><input name="text4" type="text" id="4" style="height:30px;190px;border:1px solid red;font- 
    217 size:25;" size="20" readonly/></td> 
    218  <td><input name="text5" type="text" id="5" style="height:30px;190px;border:1px solid red;font- 
    219 size:25;" size="20" readonly/></td> 
    220  </tr> 
    221  <tr> 
    222  <td><input name="text6" type="text" id="6" style="height:30px;190px;border:1px solid red;font- 
    223 size:25;" size="28" readonly/></td> 
    224  <td><input name="text7" type="text" id="7" style="height:30px;190px;border:1px solid red;font- 
    225 size:25;" size="20" readonly/></td> 
    226  <td><input name="text8" type="text" id="8" style="height:30px;190px;border:1px solid red;font- 
    227 size:25;" size="20" readonly/></td> 
    228  <td><input name="text9" type="text" id="9" style="height:30px;190px;border:1px solid red;font- 
    229 size:25;" size="20" readonly/></td> 
    230  <td><input name="text10" type="text" id="10" style="height:30px;190px;border:1px solid red;font- 
    231 size:25;" size="20" readonly/></td> 
    232  </tr> 
    233  <tr> 
    234  <td><input name="text11" type="text" id="11" style="height:30px;190px;border:1px solid red;font- 
    235 size:25;" size="28" readonly/></td> 
    236  <td><input name="text12" type="text" id="12" style="height:30px;190px;border:1px solid red;font- 
    237 size:25;" size="20" readonly/></td> 
    238  <td><input name="text13" type="text" id="13" style="height:30px;190px;border:1px solid red;font- 
    239 size:25;" size="20" readonly/></td> 
    240  <td><input name="text14" type="text" id="14" style="height:30px;190px;border:1px solid red;font- 
    241 size:25;" size="20" readonly/></td> 
    242  <td><input name="text15" type="text" id="15" style="height:30px;190px;border:1px solid red;font- 
    243 size:25;" size="20" readonly/></td> 
    244  </tr> 
    245  <tr> 
    246  <td><input name="text16" type="text" id="16" style="height:30px;190px;border:1px solid red;font- 
    247 size:25;" size="28" readonly/></td> 
    248  <td><input name="text17" type="text" id="17" style="height:30px;190px;border:1px solid red;font- 
    249 size:25;" size="20" readonly/></td> 
    250  <td><input name="text18" type="text" id="18" style="height:30px;190px;border:1px solid red;font- 
    251 size:25;" size="20" readonly/></td> 
    252  <td><input name="text19" type="text" id="19" style="height:30px;190px;border:1px solid red;font- 
    253 size:25;" size="20" readonly/></td> 
    254  <td><input name="text20" type="text" id="20" style="height:30px;190px;border:1px solid red;font- 
    255 size:25;" size="20" readonly/></td> 
    256  </tr> 
    257  </table> 
    258  <p> </p> 
    259  <p> </p> 
    260  <p> </p> 
    261  </div> 
    262 </div> 
    263 <center> 
    264  </body> 
    265 </html>
  • 相关阅读:
    国税开发子系统----纳税服务子系统问题
    Hibernate中的一对一多映射和一对一映射的创建
    hibernate 创建一对一唯一外键映射的问题
    疑问,TESt中注入sessionFactory失败
    AJAX方式进行验证码的判断(JS方式)
    过滤器和拦截器的使用
    SSH框架的整合
    编码问题
    微服务架构对比
    docker安装mysql8.0连接问题,sqlyog报2058或者Navicat 1257
  • 原文地址:https://www.cnblogs.com/wujunbin/p/7560704.html
Copyright © 2020-2023  润新知