欢迎光临
我们一直在努力

用javascript轻松制作一套简单的抽奖系统_javascript教程

建站超值云服务器,限时71元/月

    作者: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 red;font-size:25;” size=”20″ readonly/></td>
 </tr>
 </table>
 <p>三等奖(20名)</p>
 <table width=”961″ height=”102″ border=”1″>
 <tr>
 <td><input name=”text1″ type=”text” id=”1″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”28″ readonly/></td>
 <td><input name=”text2″ type=”text” id=”2″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text3″ type=”text” id=”3″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text4″ type=”text” id=”4″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text5″ type=”text” id=”5″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 </tr>
 <tr>
 <td><input name=”text6″ type=”text” id=”6″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”28″ readonly/></td>
 <td><input name=”text7″ type=”text” id=”7″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text8″ type=”text” id=”8″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text9″ type=”text” id=”9″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text10″ type=”text” id=”10″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 </tr>
 <tr>
 <td><input name=”text11″ type=”text” id=”11″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”28″ readonly/></td>
 <td><input name=”text12″ type=”text” id=”12″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text13″ type=”text” id=”13″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text14″ type=”text” id=”14″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text15″ type=”text” id=”15″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 </tr>
 <tr>
 <td><input name=”text16″ type=”text” id=”16″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”28″ readonly/></td>
 <td><input name=”text17″ type=”text” id=”17″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text18″ type=”text” id=”18″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text19″ type=”text” id=”19″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 <td><input name=”text20″ type=”text” id=”20″ style=”height:30px;width:190px;border:1px solid red;font-size:25;” size=”20″ readonly/></td>
 </tr>
 </table>
 <p> </p>
 <p> </p>
 <p> </p>
 </div>
</div>
<center>
 </body>
</html>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 用javascript轻松制作一套简单的抽奖系统_javascript教程
分享到: 更多 (0)