抽奖小程序（基于js）

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

要求实现功能如下：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 &copy; 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&gt;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;
 
}

抽奖小程序（基于js）

猜你喜欢