您的位置：首页 > Web前端 > JavaScript

JS抽奖程序

2012-06-29 14:30 183 查看

在经典论坛看到一个抽奖程序的求助，趁着自己有空，也写一个。有点懒，用了人家的html和css。

想象在一个活动中，给每个进场的人员按顺序发标有001、002……这样的卡片，这样就可以知道参与抽奖的人员有多少。抽奖可能分一等奖、二等奖等，这里我就不管，只是每个抽中的号码，不会出现在下次的抽奖中，就是每个人最多只能获一次奖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖程序</title>
<style type="text/css">
<!--
body {margin:0px;padding:0px;background-color: #000;text-align:center;}
#oknum{color:#f33;font-size:168px;line-height:168px;width:678px;height:168px;margin-left:auto;margin-right:auto;margin-top:68px;text-align:center;background:#121212; font-family:Arial, Helvetica, sans-serif;}
#finish{color:red;width:648px;height:168px;margin-left:auto;margin-right:auto;margin-top:1px;text-align:left;background:#121212; font-size:36px; padding:15px; font-family:Arial, Helvetica, sans-serif; word-spacing:15px;}
#start{width:680px;height:168px;margin-left:auto;margin-right:auto;margin-top:1px;text-align:center; font-family:微软雅黑; }
#start a{color:#868686;font-size:86px;line-height:168px;width:338px;height:168px;background:#121212;float:left;margin:1px;text-decoration: none;}
#start a:hover{color:#868686;background-color: #2E2E2E;}
-->
</style>
</head>
<body>
<div id="oknum"></div>
<div id="start"><a href="#Action">开始</a><a href="#Stop">停止</a></div><div style="clear:both;"></div>
<div id="finish"></div>
<script type="text/javascript">
var totalNum = 200;  //参与抽奖总人数
var a = [];
var i;

//初始化数组
for(i=1; i<=totalNum; i++) {
if(i < 10) {
a.push("00"+i);
}
else if(i < 100 && i>=10) {
a.push("0"+i);
}
else if(i>=100 && i<1000) {
a.push(i);
}
}

function startDraw() {
var n = 0;
flow();
function flow() {
if(n===a.length) { n = 0; }
document.getElementById("oknum").innerHTML = a
;
n++;
handle = setTimeout(flow,10);
}
}
function stopDraw() {
clearTimeout(handle);
var oknum = document.getElementById("oknum").innerHTML;
document.getElementById("finish").innerHTML += oknum + " ";
for(i=0; i<a.length; i++) {
if(a[i] === oknum) {
a.splice(i,1);
}
}
}
document.getElementById("start").getElementsByTagName("a")[0].onclick = startDraw;
document.getElementById("start").getElementsByTagName("a")[1].onclick = stopDraw;
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航