帮同事准备生日会,生日会上有抽奖环节,本意上做个小程序来抽取幸运儿,结果应用到最多的是各种游戏环节,由于理工科的男生女生都是腼腆型的,没有人积极主动参与,因此也用来抽取员工上台参与游戏。
要求实现功能如下:1.随机抽取任一员工;2.如果该员工此次生日会被抽到参与过游戏,下次抽取时将把他排除掉。
实现方式如下:通过HTML+CSS+JavaScript。
完成后的界面如图所示:
具体实现代码如下:
1.HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8′>
<meta name =”author” content =”zlily”>
<title>×××有限公司抽奖系统<title>
<link rel=”stylesheet” href=”css/lottery.css”/>
<script src=”js/isoftbirth.js”></script>
</head>
<body>
<div>
<img src=”img/logo.jpg” alt=”logo” style=”position:absolute;left:80px;top:40px;”>
<center>
<main role =”main”>
<p><input id=”result” type=”text” size=”900″ readonly/></p>
<p>
<input id=”start” type=”button” value=”开始” onclick=”setTimer()” />
</p>
</main>
<center>
<footer>
<p><small>Copyright © 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;
}