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

2016-02-19 15:40 82 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐用Javascript轻松制作一套简单的抽奖系统,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

  年底将至,许多公司忙着搞年会,会上一般都会有一些抽奖活动,下面的程序就是用JAVASCRIPT 写的一个简单的抽奖系统与大家共享。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  此代码借鉴了网上的一些网友的代码,又加上了一些诸如不重复抽奖之类的改进。大概思路如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  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; pmobile.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)||dxthis.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
 pstrong一等奖(10名)/strong/p
 table width="946" height="79" border="1"
 tr
 tdinput name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly//td
 tdinput name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 /tr
 tr
 tdinput name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly//td
 tdinput name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly//td
 tdinput 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


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

来源:https://www.tulaoshi.com/n/20160219/1610153.html

延伸阅读
标签: 生活常识
如何选一套保值房子 图老师购房知识配图 一、看了房产权还要看房屋使用 除了要察看房产证产权人与卖方身份证相同以外,特别要小心处理房屋属于共有产权的情况,还要看看房屋用途是居住呢?还是办公?是否被人用来抵押?是否被依法查封?还要看看所购的房子建筑面积大小。 二、白天看了晚上也要看 白天看房可以了解日...
孕妈妈洗澡有一套 孕妈妈,你可别小看洗澡,它不仅可以帮你清洁全身,而且能促进血液循环、消除疲劳,帮你保持平和快乐的心情,因此它是你日常生活中重要的一部分。 孕妈妈怎样洗个“安全、健康、快乐”的澡呢? 5个原则保安全 洗澡也有一些危险因素,因此孕妈妈要小心防范以下方面,洗个“安全澡”。 1、注...
缓解老人尿频的一套动作 老人尿频怎么办 建议老人可以通过练习甩手、身摇、气鼓荡等有节律的运动,促进气血在体内运行,从而缓解尿频。具体做法:站立,两脚分开与肩同宽,全身自然放松,两手自然下垂。然后以肩为支点,手掌为力点,两手掌心向后,手腕用力向后甩,前虚后实,向前不超过脚面。每甩一次,两脚掌着地,并且脚...

经验教程

478

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部