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

网络编程 2025/5/6 佚名

3 2 1

作者：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">  </head> <body> <center>       <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>      <input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <p>二等奖（15名）</p>      <input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <p>三等奖（20名）</p>      <input name="text1" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text6" type="text" id="6" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text11" type="text" id="11" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <input name="text16" type="text" id="16" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="28" readonly/>  <input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>  <input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid red;font- size:25;" size="20" readonly/>      <p> </p>  <p> </p>  <p> </p>    <center>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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