视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript简单抽奖程序的实现代码分享
2020-11-27 20:24:10 责编:小采
文档

1.需求说明

某公司年终抽奖,需要有如下功能

1)可以根据实际情况设置到场人数的最大值

2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上

3)在界面里显示全部奖项获奖人编号

4)不重复获奖

5)不会因为输入错误而导致抽奖结果异常。

2.代码呈上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> 
<html> 
<head> 
<title>某公司周年庆抽奖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script language="javascript"> 
 var timer; 
 var flag = new Array(100); 
 var existingnum = new Array(100); 
 var clickTimes = 0; 
 var randnum; 
 var cellnum =1; 
 var mobile; 
 var num ; 
 function check_input(){ 
 var input = document.getElementById("real_num").value; 
 var re = /^[1-9]+[0-9]*]*$/; 
 if (!re.test(input)){ 
 alert("请输入正整数"); 
 window.location.href=window.location.href; 
 return false; 
 } 

 } 

 //get the random numbers from the mobile array every 0.05s 
 function setTimer(){ 
 timer = setInterval("getRandNum();",50); 
 document.getElementById("start").disabled = true; 
 document.getElementById("end").disabled = false; 
 } 

 function getRandNum(){ 
 document.getElementById("result").value = mobile[GetRnd(0,num)]; 
 } 

 function GetRnd(min,max){ 
 randnum = parseInt(Math.random()*(max-min+1)); 
 return randnum; 
 } 

 //------------------------------------------------ 

 //turn the input's running down 
 function clearTimer(){ 
 noDupNum(); 
 clearInterval(timer); 
 document.getElementById("start").disabled = false; 
 document.getElementById("end").disabled = true; 
 } 
 // Re defined array:change the length of the array and delete the checked one 
 function noDupNum(){ 
 mobile.removeEleAt(randnum); 
 var o = 0; 
 for(p=0; p<mobile.length;p++){ 
 if(typeof mobile[p]!="undefined"){ 
 mobile[o] = mobile[p]; 
 o++; 
 } 
 } 
 num = mobile.length-1; 
 } 

 function setValues(){ 
 document.getElementById(cellnum).value = document.getElementById("result").value ; 
 cellnum++; 
 } 

 function set_array(){ 
 var real_num = document.getElementById("real_num").value ; 
 mobile= new Array(real_num); 
 var o = 0; 
 for(i=1; i<=real_num;i++){ 
 mobile[o] = i; 
 o++; 
 } 
 num = mobile.length-1; 
 document.getElementById("set_number").disabled = true; 
 } 

 Array.prototype.removeEleAt = function(dx){ 
 if(isNaN(dx)||dx>this.length){return false;} 
 this.splice(dx,1); 
 } 
</script> 
</head> 
<body> 
 <center> 
 <p id="main"> 
 <p> 
 <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>一等奖(1名)</strong></p> 
 <table width="190" height="30" border="1"> 
 <tr> 
 <td><input name="text1" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td> 
 </tr> 
 </table> 
 <p>二等奖(2名)</p> 
 <table width="380" height="30" border="1"> 
 <tr> 
 <td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td> 
 <td><input name="text3" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td> 
 </tr> 
 </table> 
 </p> 
 </p> 
 <p></p> 
 <p></p> 
 <p id="setter" style="border:1px solid;width:45em"> 
 <h3>系统设置</h3> 
 <table width="300" height="30" border="1"> 
 <tr> 
 <td>活动人数</td> 
 <td><input type="text" id="real_num" style="width:11em"></td> 
 <td><input id="set_number" type="button" value="设置" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;
 width:4em; background: #fc0;" onclick="check_input();set_array();"/></td> 
 </tr> 
 <tr> 

 </tr> 
 </table> 
 <br/> 
 <input id="set_number" type="button" value="重新开始抽奖" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;
 width:45em;height: 3em;background: #fc0;" onclick="window.location.href=window.location.href;"/> 
 <p></p> 
 </p> 
 <center> 
</body> 
</html>

3.丑陋截图

我很丑,但是我很温柔~

下载本文
显示全文
专题