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

心若水寒

UID: 4
帖子: 936
积分: 1710
在线时间: 2168小时
注册时间: 2006-05-17
最后登录: 2015-07-08

1^# 心若水寒发表于2006-12-29

用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"><br />
<html><br />
<head><br />
<title> 2006年会抽奖系统</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<script language="javascript"><br />
 <br />
// global variables <br />
var timer;<br />
var flag = new Array(100);<br />
var existingnum = new Array(100);<br />
var clickTimes = 0;<br />
var randnum;<br />
var cellnum =1;<br />
var mobile = new Array();<br />
// set data here!!<br />
mobile[0]=13020000100;<br />
mobile[1]=13020000101;<br />
mobile[2]=13020000102;<br />
mobile[3]=13020000103;<br />
mobile[4]=13020000104;<br />
mobile[5]=13020000105;<br />
mobile[6]=13020000106;<br />
mobile[7]=13020000107;<br />
mobile[8]=13020000108;<br />
mobile[9]=13020000109;<br />
mobile[10]=13020000110;<br />
mobile[11]=13020000111;<br />
mobile[12]=13020000112;<br />
mobile[13]=13020000113;<br />
mobile[14]=13020000114;<br />
mobile[15]=13020000115;<br />
<br />
<br />
mobile[16]=13020000116;<br />
mobile[17]=13020000117;<br />
mobile[18]=13020000118;<br />
mobile[19]=13020000119;<br />
mobile[20]=13020000120;<br />
mobile[21]=13020000121;<br />
mobile[22]=13020000122;<br />
mobile[23]=13020000123;<br />
mobile[24]=13020000124;<br />
mobile[25]=13020000125;<br />
mobile[26]=13020000126;<br />
mobile[27]=13020000127;<br />
mobile[28]=13020000128;<br />
mobile[29]=13020000129;<br />
mobile[30]=13020000130;<br />
mobile[31]=13020000131;<br />
mobile[32]=13020000132;<br />
mobile[33]=13020000133;<br />
mobile[34]=13020000134;<br />
mobile[35]=13020000135;<br />
mobile[36]=13020000136;<br />
mobile[37]=13020000137;<br />
mobile[38]=13020000138;<br />
mobile[39]=13020000139;<br />
mobile[40]=13020000140;<br />
mobile[41]=13020000141;<br />
mobile[42]=13020000142;<br />
mobile[43]=13020000143;<br />
mobile[44]=13020000144;<br />
mobile[45]=13020000145;<br />
mobile[46]=13020020146;<br />
var num = mobile.length-1;<br />
function getRandNum(){<br />
document.getElementById("result").value = mobile[GetRnd(0,num)];<br />
}<br />
function start(){<br />
clearInterval(timer);<br />
timer = setInterval('change()',50); <br />
}<br />
function ok(){<br />
clearInterval(timer);<br />
}<br />
function GetRnd(min,max){<br />
 <br />
randnum = parseInt(Math.random()*(max-min+1));<br />
return randnum;<br />
}<br />
function setTimer(){<br />
 timer = setInterval("getRandNum();",10);<br />
 document.getElementById("start").disabled = true;<br />
 document.getElementById("end").disabled = false;<br />
}<br />
function clearTimer(){<br />
 noDupNum();<br />
 clearInterval(timer);<br />
 document.getElementById("start").disabled = false;<br />
 document.getElementById("end").disabled = true;<br />
 <br />
}<br />
<br />
<br />
function noDupNum(){<br />
 // to remove the selected mobile phone number<br />
 mobile.removeEleAt(randnum);<br />
 <br />
 // to reorganize the mobile number array!!<br />
 var o = 0;<br />
 for(p=0; p<mobile.length;p++){<br />
 if(typeof mobile[p]!="undefined"){<br />
 mobile[o] = mobile[p];<br />
 o++;<br />
 }<br />
 }<br />
 num = mobile.length-1;<br />
 }<br />
// method to remove the element in the array<br />
Array.prototype.removeEleAt = function(dx)<br />
 {<br />
 if(isNaN(dx)||dx>this.length){return false;}<br />
 this.splice(dx,1);<br />
 }<br />
// set mobile phone numbers to the table cell <br />
function setValues(){<br />
 document.getElementById(cellnum).value = document.getElementById("result").value ;<br />
 cellnum++;<br />
 }<br />
</script><br />
</head><br />
<body><br />
<center><br />
<div> </div><br />
<div id="main"><br />
 <div><br />
 <h1>中奖号码</h1><br />
 <br />
 <p><br />
 <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-size:120;" readonly/></p><br />
 <p><br />
 <input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="setTimer()" /><br />
 <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/><br />
</p><br />
 <p><strong>一等奖（10名）</strong></p><br />
 <table width="946" height="79" border="1"><br />
 <tr><br />
 <td><input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 </table><br />
 <p>二等奖（15名）</p><br />
 <table width="951" height="88" border="1"><br />
 <tr><br />
<br />
<br />
 <td><input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 </table><br />
 <p>三等奖（20名）</p><br />
 <table width="961" height="102" border="1"><br />
 <tr><br />
 <td><input name="text1" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text6" type="text" id="6" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text11" type="text" id="11" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 <tr><br />
 <td><input name="text16" type="text" id="16" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><br />
 <td><input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 <td><input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td><br />
 </tr><br />
 </table><br />
 <p> </p><br />
 <p> </p><br />
 <p> </p><br />
 </div><br />
</div><br />
<center><br />
 </body><br />
</html>

提示：您可以先修改部分代码再运行

毕业了。。。

liufx

UID: 22402
帖子: 51
积分: 111
在线时间: 19小时
注册时间: 2008-04-13
最后登录: 2008-08-04

2^# liufx 发表于2008-04-24

能不能设计成从数据库中得到手机号码数据呢？

天边云

UID: 13300
帖子: 26
积分: 5
在线时间: 68小时
注册时间: 2007-03-07
最后登录: 2010-12-08

3^# 天边云发表于2008-05-20

这个不错，应该可以从数据库取出数据再赋值

aba01239

UID: 28337
帖子: 6
积分: 10
在线时间: 2小时
注册时间: 2009-03-20
最后登录: 2009-06-08

4^# aba01239 发表于2009-03-20

aba01239

UID: 28337
帖子: 6
积分: 10
在线时间: 2小时
注册时间: 2009-03-20
最后登录: 2009-06-08

5^# aba01239 发表于2009-03-20

显示聊天双方的头像怎么写啊？

显示在div里，大家帮帮忙！