用Javascript轻松制作抽奖系统

  • 来源: IT部落 作者: sevenleaf   2010-05-05/11:48
  •       许多公司都会举行一些晚会,会上一般都会有一些抽奖活动,下面的程序就是用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>


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多