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


答案：作者：jegg  
　　年底将至，许多公司忙着搞年会，会上一般都会有一些抽奖活动，下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享。 
　　此代码借鉴了网上的一些网友的代码，又加上了一些诸如不重复抽奖之类的改进。大概思路如下： 
　　1.将所有的的抽奖数据（这里为手机号码）存入数组中。 
　　2.使用random 函数随机产生该数组的INDEX 
　　3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码，并显示。 
      4.使用removeEleAt（index）函数删除随机产生过的手机号码。并且重新组织生成剩余的手机号码为一个新的数组，为下次使用。 
　　使用方法： 
　　将以下原代码拷到写字板上，然后将txt属性该成html即可。如果出现显示乱码，请改变网页编码（查看--编码）。 
　　原代码如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> 
<html> 
<head> 
<title> 2006年会抽奖系统</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script language="javascript"> 
  
// global variables  
var timer; 
var flag = new Array(100); 
var existingnum = new Array(100); 
var clickTimes = 0; 
var randnum; 
var cellnum =1; 
var mobile = new Array(); 
// set data here!! 
mobile[0]=13020000100; 
mobile[1]=13020000101; 
mobile[2]=13020000102; 
mobile[3]=13020000103; 
mobile[4]=13020000104; 
mobile[5]=13020000105; 
mobile[6]=13020000106; 
mobile[7]=13020000107; 
mobile[8]=13020000108; 
mobile[9]=13020000109; 
mobile[10]=13020000110; 
mobile[11]=13020000111; 
mobile[12]=13020000112; 
mobile[13]=13020000113; 
mobile[14]=13020000114; 
mobile[15]=13020000115; 


mobile[16]=13020000116; 
mobile[17]=13020000117; 
mobile[18]=13020000118; 
mobile[19]=13020000119; 
mobile[20]=13020000120; 
mobile[21]=13020000121; 
mobile[22]=13020000122; 
mobile[23]=13020000123; 
mobile[24]=13020000124; 
mobile[25]=13020000125; 
mobile[26]=13020000126; 
mobile[27]=13020000127; 
mobile[28]=13020000128; 
mobile[29]=13020000129; 
mobile[30]=13020000130; 
mobile[31]=13020000131; 
mobile[32]=13020000132; 
mobile[33]=13020000133; 
mobile[34]=13020000134; 
mobile[35]=13020000135; 
mobile[36]=13020000136; 
mobile[37]=13020000137; 
mobile[38]=13020000138; 
mobile[39]=13020000139; 
mobile[40]=13020000140; 
mobile[41]=13020000141; 
mobile[42]=13020000142; 
mobile[43]=13020000143; 
mobile[44]=13020000144; 
mobile[45]=13020000145; 
mobile[46]=13020020146; 
var num = mobile.length-1; 
function getRandNum(){ 
document.getElementById("result").value = mobile[GetRnd(0,num)]; 
} 
function start(){ 
clearInterval(timer); 
timer = setInterval('change()',50);  
} 
function ok(){ 
clearInterval(timer); 
} 
function GetRnd(min,max){ 
  
randnum = parseInt(Math.random()*(max-min+1)); 
return randnum; 
} 
function setTimer(){ 
 timer = setInterval("getRandNum();",10); 
 document.getElementById("start").disabled = true; 
 document.getElementById("end").disabled = false; 
} 
function clearTimer(){ 
 noDupNum(); 
 clearInterval(timer); 
 document.getElementById("start").disabled = false; 
 document.getElementById("end").disabled = true; 
  
} 


function noDupNum(){ 
 // to remove the selected mobile phone number 
 mobile.removeEleAt(randnum); 
  
 // to reorganize the mobile number array!! 
 var o = 0; 
 for(p=0; p<mobile.length;p++){ 
 if(typeof mobile[p]!="undefined"){ 
 mobile[o] = mobile[p]; 
 o++; 
 } 
 } 
 num = mobile.length-1; 
 } 
// method to remove the element in the array 
Array.prototype.removeEleAt = function(dx) 
 { 
 if(isNaN(dx)||dx>this.length){return false;} 
 this.splice(dx,1); 
 } 
// set mobile phone numbers to the table cell  
function setValues(){ 
 document.getElementById(cellnum).value = document.getElementById("result").value ; 
 cellnum++; 
 } 
</script> 
</head> 
<body> 
<center> 
<div> </div> 
<div id="main"> 
 <div> 
 <h1>中奖号码</h1> 
  
 <p> 
 <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font- 
size:120;" readonly/></p> 
 <p> 
 <input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000  
#aaa;width:4em; background: #fc0;" onclick="setTimer()" /> 
 <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000  
#aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/> 
</p> 
 <p><strong>一等奖（10名）</strong></p> 
 <table width="946" height="79" border="1"> 
 <tr> 
 <td><input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly/></td> 
 <td><input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 </tr> 
 <tr> 
 <td><input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly/></td> 
 <td><input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 </tr> 
 </table> 
 <p>二等奖（15名）</p> 
 <table width="951" height="88" border="1"> 
 <tr> 


 <td><input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly/></td> 
 <td><input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 </tr> 
 <tr> 
 <td><input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly/></td> 
 <td><input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 </tr> 
 <tr> 
 <td><input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly/></td> 
 <td><input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly/></td> 
 <td><input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid re</pre><p>上一个：<a href="/show/5467b7e6db16bf8b.htm">写了几个类，希望对大家有用。</a><br/>下一个：<a href="/show/726505f3e5994e1d.htm">JS的IE和Firefox兼容性集锦</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/502abe03a85f8e86.htm"><img src='/upload/20121013/dot.gif' width=105 height=105><br/>JavaScript For Beginners(转载)</a></li><li><a href="/show/4188cd78793bffa2.htm"><img src='/upload/2013111519/20130304021434103.jpg' width=105 height=105><br/>通过jsoup解析页面html获取优酷页面视频列表</a></li><li><a href="/show/e225412581bbb1eb.htm"><img src='/upload/2013111519/20121201084456622.png' width=105 height=105><br/>Extjs4---用RowEditing对数据进行增加，修改</a></li><li><a href="/show/43c57410e3aa2133.htm"><img src='/upload/2013111519/20121113050138442.jpg' width=105 height=105><br/>Extjs4实现两个GridPanel之间数据拖拽功能</a></li><li><a href="/show/82a42c5b4f202356.htm"><img src='/upload/2013111604/20130319114245430.png' width=105 height=105><br/>Struts2,Hibernate,Sring三种基本框架整合方法（一）</a></li><li><a href="/show/f5d7c513207930c0.htm"><img src='/upload/2013111616/20130227113358850.gif' width=105 height=105><br/>Android通过iChartJs实现动态图表、报表的显示Demo</a></li></ul></div></div>
  <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/b636313fd0bf206e.htm">js把图片转换成 base64代码</a></dd><dd><a target="_blank" href="/show/f104aaf60c037fed.htm">js把base代码转换成图片</a></dd><dd><a target="_blank" href="/show/02f65fc48980b1fe.htm">JS 将 base64编码的图片转化为图片文件</a></dd><dd><a target="_blank" href="/show/5044556d492a3bd0.htm">js中的定时器</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd></dl></div>
</div>
<div id="zykleft">
  <div class="leftm">
    <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a>
    	<div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div>
      <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div>
    <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl>
  </div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div>
  <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div>
</div></div>
<div class="clear"></div>
<div class="bdshare">
  <script type="text/javascript" src="/js/share.js"></script>
</div>
<div class="clear"></div>
<div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script>
</div>
</body>
</html>