当前位置：首页 > 资讯 > 技术文档

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

时间：2021-09-06 17:56 编辑：来源：阅读：
扫一扫，手机访问

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

作者：jegg 　　年底将至，许多公司忙着搞年会，会上一般都会有一些抽奖活动，下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享。　　此代码借鉴了网上的一些网友的代码，又加上了一些诸如不重复抽奖之类的改进。大概思路如下：　　1.将所有的的抽奖数据（这里为手机号码）存入数组中。　　2.使用random 函数随机产生该数组的INDEX 　　3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码，并显示。 4.使用removeEleAt（index）函数删除随机产生过的手机号码。并且重新组织生成剩余的手机号码为一个新的数组，为下次使用。　　使用方法：　　将以下原代码拷到写字板上，然后将txt属性该成html即可。如果出现显示乱码，请改变网页编码（查看--编码）。　　原代码如下：

2006年会抽奖系统 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
 
 
[center] 
<div> </div> 
<div id="main"> 
 <div> 
 <h1>中奖号码</h1> 
  
  
 <input id="result" readonly size="30" style="height:130px;width:800px;border:2px solid red;font-  size:120;" type="text">
 
  
 <input id="start" onclick="setTimer()" style="border: 1px solid; border-color: #aaa 000 #000   #aaa;width:4em; background: #fc0;" type="button" value="开始"> 
 <input disabled id="end" onclick="clearTimer();setValues();" style="border: 1px solid; border-color: #aaa 000 #000   #aaa;width:4em; background: #fc0;" type="button" value="停">

[b]一等奖（10名）[/b]
 
 <table border="1" height="79" width="946"> 
 <tr> 
 <td><input id="36" name="text36" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="37" name="text37" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="38" name="text38" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="39" name="text39" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="40" name="text40" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="41" name="text41" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="42" name="text42" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="43" name="text43" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="44" name="text44" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="45" name="text45" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 </table> 
 二等奖（15名）
 
 <table border="1" height="88" width="951"> 
 <tr>

<td><input id="21" name="text21" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="22" name="text22" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="23" name="text23" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="24" name="text24" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="25" name="text25" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="26" name="text26" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="27" name="text27" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="28" name="text28" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="29" name="text29" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="30" name="text30" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="31" name="text31" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="32" name="text32" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="33" name="text33" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="34" name="text34" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="35" name="text35" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 </table> 
 三等奖（20名）
 
 <table border="1" height="102" width="961"> 
 <tr> 
 <td><input id="1" name="text1" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="2" name="text2" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="3" name="text3" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="4" name="text4" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="5" name="text5" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="6" name="text6" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="7" name="text7" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="8" name="text8" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="9" name="text9" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="10" name="text10" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="11" name="text11" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="12" name="text12" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="13" name="text13" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="14" name="text14" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="15" name="text15" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 <tr> 
 <td><input id="16" name="text16" readonly size="28" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="17" name="text17" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="18" name="text18" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="19" name="text19" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 <td><input id="20" name="text20" readonly size="20" style="height:30px;width:190px;border:1px solid red;font-  size:25;" type="text"></td> 
 </tr> 
 </table> 
  
 
  
 
  
 
 </div> 
</div> 
<center> 
  
[/center]</center>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：document.write与writeln的输出内容区别说明
下一篇：js中document.write使用过程中的一点疑问解答

资讯排行榜
更多>>