«

JavaScript简单抽奖程序的实现及代码

时间:2024-3-2 17:06     作者:韩俊     分类: Javascript


JavaScript简单抽奖程序的实现及代码

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&#43;1));           return randnum;       }       //------------------------------------------------       //turn the input's running down       function clearTimer(){           noDupNum();           clearInterval(timer);           document.getElementById(&quot;start&quot;).disabled = false;           document.getElementById(&quot;end&quot;).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&lt;mobile.length;p&#43;&#43;){               if(typeof mobile[p]!=&quot;undefined&quot;){                   mobile[o] = mobile[p];                   o&#43;&#43;;               }           }           num = mobile.length-1;        }        function setValues(){           document.getElementById(cellnum).value = document.getElementById(&quot;result&quot;).value ;           cellnum&#43;&#43;;       }       function set_array(){           var real_num = document.getElementById(&quot;real_num&quot;).value ;           mobile= new Array(real_num);           var o = 0;           for(i=1; i&lt;=real_num;i&#43;&#43;){               mobile[o] = i;               o&#43;&#43;;           }           num = mobile.length-1;           document.getElementById(&quot;set_number&quot;).disabled = true;       }       Array.prototype.removeEleAt = function(dx){           if(isNaN(dx)||dx&gt;this.length){return false;}               this.splice(dx,1);           }   &lt;/script&gt;   &lt;/head&gt;   &lt;body&gt;       &lt;center&gt;           &lt;div id=&quot;main&quot;&gt;               &lt;div&gt;                   &lt;h1&gt;获奖小伙伴&lt;/h1&gt;                   &lt;p&gt;                       &lt;input id=&quot;result&quot; type=&quot;text&quot; size=&quot;30&quot; style=&quot;height:130px;width:800px;border:2px solid red;font-size:120;&quot; readonly/&gt;                   &lt;/p&gt;                   &lt;p&gt;                       &lt;input id=&quot;start&quot; type=&quot;button&quot; value=&quot;开始&quot; style=&quot;border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;&quot; onclick=&quot;setTimer()&quot; /&gt;                       &lt;input id=&quot;end&quot; type=&quot;button&quot; value=&quot;停&quot; style=&quot;border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;&quot;onclick=&quot;clearTimer();setValues();&quot; disabled/&gt;                   &lt;/p&gt;                   &lt;p&gt;&lt;strong&gt;一等奖(1名)&lt;/strong&gt;&lt;/p&gt;                   &lt;table width=&quot;190&quot; height=&quot;30&quot; border=&quot;1&quot;&gt;                       &lt;tr&gt;                           &lt;td&gt;&lt;input name=&quot;text1&quot; type=&quot;text&quot; id=&quot;3&quot; style=&quot;height:30px;width:190px;border:1px solid red;font-size:25;&quot; size=&quot;28&quot; readonly/&gt;&lt;/td&gt;                       &lt;/tr&gt;                   &lt;/table&gt;                   &lt;p&gt;二等奖(2名)&lt;/p&gt;                   &lt;table width=&quot;380&quot; height=&quot;30&quot; border=&quot;1&quot;&gt;                       &lt;tr&gt;                           &lt;td&gt;&lt;input name=&quot;text2&quot; type=&quot;text&quot; id=&quot;2&quot; style=&quot;height:30px;width:190px;border:1px solid red;font-size:25;&quot; size=&quot;28&quot; readonly/&gt;&lt;/td&gt;                           &lt;td&gt;&lt;input name=&quot;text3&quot; type=&quot;text&quot; id=&quot;1&quot; style=&quot;height:30px;width:190px;border:1px solid red;font-size:25;&quot; size=&quot;20&quot; readonly/&gt;&lt;/td&gt;                       &lt;/tr&gt;                   &lt;/table&gt;               &lt;/div&gt;           &lt;/div&gt;           &lt;p&gt;&lt;/p&gt;           &lt;p&gt;&lt;/p&gt;           &lt;div id=&quot;setter&quot; style=&quot;border:1px solid;width:45em&quot;&gt;               &lt;h3&gt;系统设置&lt;/h3&gt;               &lt;table width=&quot;300&quot; height=&quot;30&quot; border=&quot;1&quot;&gt;                       &lt;tr&gt;                           &lt;td&gt;活动人数&lt;/td&gt;                           &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;real_num&quot; style=&quot;width:11em&quot;&gt;&lt;/td&gt;                           &lt;td&gt;&lt;input id=&quot;set_number&quot; type=&quot;button&quot; value=&quot;设置&quot; style=&quot;border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;&quot; onclick=&quot;check_input();set_array();&quot;/&gt;&lt;/td&gt;                       &lt;/tr&gt;                       &lt;tr&gt;                       &lt;/tr&gt;               &lt;/table&gt;               &lt;br/&gt;               &lt;input id=&quot;set_number&quot; type=&quot;button&quot; value=&quot;重新开始抽奖&quot; style=&quot;border: 1px solid; border-color: #aaa 000 #000 #aaa;width:45em;height: 3em;background: #fc0;&quot;  onclick=&quot;window.location.href=window.location.href;&quot;/&gt;               &lt;p&gt;&lt;/p&gt;           &lt;/div&gt;       &lt;center&gt;   &lt;/body&gt;   &lt;/html&gt;

复制代码

3.丑陋截图

我很丑,但是我很温柔~

标签: javascript

热门推荐