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

更新时间：2006年12月18日 00:00:00 作者：

作者：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>

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

您可能感兴趣的文章:

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

JavaScript中内存泄漏的介绍与教程（推荐）
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。下面这篇文章主要给的大家介绍了关于JavaScript中内存泄漏的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
当某个文本框成为焦点时即清除文本框内容
这篇文章主要介绍了当某个文本框成为焦点时如何清除文本框内容,需要的朋友可以参考下
2014-04-04
js格式化时间的简单实例
本文分享了js格式化时间的实例代码，需要的朋友可以看下
2016-11-11
JavaScript sleep睡眠函数的使用
JavaScript是单线程运行的，没有内置的sleep函数，那么JavaScript sleep睡眠函数是怎样实现的，感兴趣的小伙伴们可以参考一下
2021-07-07
JScript 脚本实现文件下载一般用于下载木马
脚本实现文件下载，这个是jscript的，脚本之家以前曾发布vbscript版本的,原理一样的。
2009-10-10
javascript圆盘抽奖程序实现原理和完整代码例子
这篇文章主要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下
2014-06-06
Bootstrap基本布局实现方法详解
这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
这篇文章主要介绍了手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现，感兴趣的小伙伴们可以参考一下
2016-08-08
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
本文主要介绍在HTML5中使用iScroll实现下拉刷新，上拉加载更多数据的方法，主要就是写了两个自定义函数pullDownAction和pullUpAction，分别在下拉和上拉的事件中调用他们。
2016-05-05
js使用swiper实现层叠轮播效果实例代码
这篇文章主要给大家介绍了关于js使用swiper实现层叠轮播效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具