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

华夏恒星

华夏恒星

2016-02-19 15:40

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

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

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

  1.将所有的的抽奖数据(这里为手机号码)存入数组中。
  2.使用random 函数随机产生该数组的INDEX
  3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码,并显示。
  4.使用removeEleAt(index)函数删除随机产生过的手机号码。并且重新组织生成剩余的手机号码为一个新的数组,为下次使用。

  使用方法:

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

  将以下原代码拷到写字板上,然后将txt属性该成html即可。如果出现显示乱码,请改变网页编码(查看--编码)。

  原代码如下:

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

!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
展开更多 50%)
分享

猜你喜欢

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

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

用Javascript轻松制作抽奖系统

电脑网络
用Javascript轻松制作抽奖系统

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用Winsock制作一套聊天室和对话系统

编程语言 网络编程
用Winsock制作一套聊天室和对话系统

用Photoshop制作一套社交网络图标

电脑网络
用Photoshop制作一套社交网络图标

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用一套论坛程序架设多个论坛

ASP
用一套论坛程序架设多个论坛

一套制作名片的得心应手的方法

办公软件
一套制作名片的得心应手的方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用java从oracle取数

用java从oracle取数

windows7下如何使用系统还原与镜像备份

windows7下如何使用系统还原与镜像备份
下拉加载更多内容 ↓