用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;width: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;width:4em; background: #fc0;" onclick="setTimer()" /> 
136  <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000  
137 #aaa;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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;width: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>

 

posted @ 2017-09-20 11:54  wujunbin  阅读(629)  评论(0)    收藏  举报