javascript

位置:IT落伍者 >> javascript >> 浏览文章

用Javascript轻松制作抽奖系统


发布日期:2021年10月07日
 
用Javascript轻松制作抽奖系统
年底将至许多公司忙着搞年会会上一般都会有一些抽奖活动下面的程序就是用JAVASCRIPT 写的一个简单的抽奖系统与大家共享

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

将所有的的抽奖数据(这里为手机号码)存入数组中

使用random 函数随机产生该数组的INDEX

使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码并显示

使用removeEleAt(index)函数删除随机产生过的手机号码并且重新组织生成剩余的手机号码为一个新的数组为下次使用

使用方法

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

原代码如下

<!DOCTYPE HTML PUBLIC //WC//DTD HTML TRANSITIONAL//EN>

<html>

<head>

<title> 年会抽奖系统</title>

<meta httpequiv=ContentType content=text/html; charset=utf>

<script language=javascript>

// global variables

var timer;

var flag = new Array();

var existingnum = new Array();

var clickTimes = ;

var randnum;

var cellnum =;

var mobile = new Array();

// set data here!!

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

mobile[]=;

var num = mobilelength;

function getRandNum(){

documentgetElementById(result)value = mobile[GetRnd(num)];

}

function start(){

clearInterval(timer);

timer = setInterval(change());

}

function ok(){

clearInterval(timer);

}

function GetRnd(minmax){

randnum = parseInt(Mathrandom()*(maxmin+));

return randnum;

}

function setTimer(){

timer = setInterval(getRandNum(););

documentgetElementById(start)disabled = true;

documentgetElementById(end)disabled = false;

}

function clearTimer(){

noDupNum();

clearInterval(timer);

documentgetElementById(start)disabled = false;

documentgetElementById(end)disabled = true;

}

function noDupNum(){

// to remove the selected mobile phone number

mobileremoveEleAt(randnum);

// to reorganize the mobile number array!!

var o = ;

for(p=; p<mobilelength;p++){

if(typeof mobile[p]!=undefined){

mobile[o] = mobile[p];

o++;

}

}

num = mobilelength;

}

// method to remove the element in the array

ArrayprototyperemoveEleAt = function(dx)

{

if(isNaN(dx)||dx>thislength){return false;}

thissplice(dx);

}

// set mobile phone numbers to the table cell

function setValues(){

documentgetElementById(cellnum)value = documentgetElementById(result)value ;

cellnum++;

}

</script>

</head>

<body>

<center>

<div> </div>

<div id=main>

<div>

<h>中奖号码</h>

<p>

<input id=result type=text size=  readonly/></p>

<p>

<input id=start type=button value=开始  onclick=setTimer() />

<input id=end type=button value= onclick=clearTimer();setValues(); disabled/>

</p>

<p><strong>一等奖(名)</strong></p>

<table width= height= border=>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

</table>

<p>二等奖(名)</p>

<table width= height= border=>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

</table>

<p>三等奖(名)</p>

<table width= height= border=>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

<tr>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

<td><input name=text type=text id=  size= readonly/></td>

</tr>

</table>

<p> </p>

<p> </p>

<p> </p>

</div>

</div>

<center>

</body>

</html>

               

上一篇:什么是ajax

下一篇:给大家个jquery $.getJSON的例子