帮同事准备生日会，生日会上有抽奖环节，本意上做个小程序来抽取幸运儿，结果应用到最多的是各种游戏环节，由于理工科的男生女生都是腼腆型的，没有人积极主动参与，因此也用来抽取员工上台参与游戏。

要求实现功能如下：1.随机抽取任一员工；2.如果该员工此次生日会被抽到参与过游戏，下次抽取时将把他排除掉。

实现方式如下：通过HTML+CSS+JavaScript。

完成后的界面如图所示：

具体实现代码如下：

1.HTML代码：

!DOCTYPE htmlhtmlheadmeta charset=’UTF-8′meta name =”author” content =”zlily”title×××有限公司抽奖系统titlelink rel=”stylesheet” href=”css/lottery.css”/script src=”js/isoftbirth.js”/script/headbodydivimg src=”img/logo.jpg” alt=”logo” style=”position:absolute;left:80px;top:40px;”centermain role =”main”pinput id=”result” type=”text” size=”900″ readonly//ppinput id=”start” type=”button” value=”开始” onclick=”setTimer()” //p/maincenterfooterpsmallCopyright © 2009 – 2015 ×××有限公司 版权所有/small/p/footer/div/body/html

2.js代码：

var timer; var flag = new Array(100); var existingnum = new Array(100); var clickTimes = 0; var randnum; var cellnum =1; var workid = new Array(); workid[0]='姓名1'; workid[1]='姓名2'; workid[2]='姓名3'; workid[3]='姓名4'; workid[4]='姓名5'; workid[5]='姓名6'; workid[6]='姓名7'; workid[7]='姓名8'; workid[8]='姓名9'; workid[9]='姓名10'; workid[10]='姓名11'; workid[11]='姓名12'; workid[12]='姓名13'; workid[13]='姓名14'; workid[14]='姓名15'; workid[15]='姓名16'; workid[16]='姓名17'; workid[17]='姓名18'; workid[18]='姓名19'; workid[19]='姓名20'; workid[20]='姓名21'; workid[21]='姓名22'; workid[22]='姓名23'; workid[23]='姓名24'; workid[24]='姓名25'; workid[25]='姓名26'; workid[26]='姓名27'; workid[27]='姓名28'; workid[28]='姓名29'; workid[29]='姓名30'; workid[30]='姓名31'; varnum = workid.length-1; functiongetRandNum(){ document.getElementById("result").value= workid[GetRnd(0,num)]; } functionstart(){ clearInterval(timer); timer= setInterval('change()',50); } functionok(){ clearInterval(timer); } functionGetRnd(min,max){ randnum= parseInt(Math.random()*(max-min+1)); returnrandnum; } functionsetTimer(){ timer =setInterval("getRandNum();",10); document.getElementById("start").disabled= true; document.getElementById("end").disabled= false; } functionclearTimer(){ noDupNum(); clearInterval(timer); document.getElementById("start").disabled= false; document.getElementById("end").disabled= true; } functionnoDupNum(){ workid.removeEleAt(randnum); var o = 0; for(p=0; p if(typeof workid[p]!="Game over"){ workid[o] = workid[p]; o++; } } num = workid.length-1; } Array.prototype.removeEleAt= function(dx) { if(isNaN(dx)||dx>this.length){returnfalse;} this.splice(dx,1); }

3.CSS代码：

/* ========================================================================== author zll project lottery date 2017/4/6 09:49 initial ========================================================================== */ body { color:#000; font:100% sans-serif; margin:15px 0; padding:5px 0 25px; } #result{ height:290px; width:800px; font-size:90px; text-align:center; border:transparent; background:transparent; } #start{ border: 1px solid; border-color:#aaa 000 #000 #aaa; width:5em; height:2em; background:#BD161D; } #end{ border: 1px solid; border-color:#aaa 000 #000 #aaa; width:5em; height:2em; background:#BD161D; } /* CONTAINER DIV AROUND WHOLE PAGE ---------------------------------------- */ .container { margin:100px 65px 20px 65px; width:1200px; height:376px; background-image:url('../img/png.png') } /* MAIN PAGE CONTENT ---------------------------------------- */ main { padding:70px 200px 0px 100px; width:800px; height:376px; } /* FOOTER ---------------------------------------- */ footer { clear:both; color:#696969; border-top:2px solid #BFBFBA; padding:5px 10px 10px 20px; } footer p { font-size:1em; margin:0; }