Web开发 (1): 公司年会抽奖程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title>
<style>
.div-relative{position:relative; left:5%; color:#000; border:1px solid #000; width:90%; height:90%}
.div-a{ position:absolute; left:10%; top:50px; background:#000; width:80%; height:80%}
/* css注释说明： 背景为红色 */
.div-b{z-index:80; position:absolute; left:10%; top:50px; background:rgba(0,0,0,0.3); width:80%; height:80%}
video_box {z-index:100;float:left; margin:0 auto;width:100%;text-align:center;border:none;color:blue;font-family:'黑体';
padding:0px 0;
font-size:48pt;
}
.logo_box {margin:0 auto;width:100%;text-align:center;border:none;color:blue;font-family:'黑体';
filter:glow(color=red,strength=1);
padding:30px 0;
font-size:48pt;
}
.result_box {margin:0 auto;width:80%;text-align:center;border:2px solid #333;background:#CCC;color:blue;font-family:Verdana;
padding:30px 0;
font-size:40pt;
}
.result_box b {
margin-right : 80px;
}
.button_box {margin:30px 0 0 0; padding:0 30px 30px 0;}
.button_box .btn {cursor:pointer;padding:0 30px;margin:0 10px;color:#555;font-family:"\5B8B\4F53",sans-serif;font-size:40px;}
/* 背景为黄色 */
</style>
</head>
<body> <script type="text/javascript">
//抽奖数据，以英文逗号分隔
var alldata = "赵 一,钱 二,孙 三,李 四,王 五";
var alldataarr = alldata.split(",");
var timer;
var curIndex=null;
function playPause()
{
var myVideo = document.getElementById("divideo");
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
//myVideo.stop();
}
function change(){
var curdataarr = alldataarr.slice(0);
var result = "";
var total = document.getElementById("total").value;
if(!total){
total = 1;
document.getElementById("total").value = total;
}else if(total>=curdataarr.length){
total = curdataarr.length;
document.getElementById("total").value = total;
}
for(var i=0;i<total;i++){
var rnd = GetRnd(0,curdataarr.length-1);
result += "<b>"+curdataarr[rnd]+"</b>";
curdataarr.splice(rnd,1);
}
document.getElementById("oknum").innerHTML = result;
}
function start(){
var myVideo = document.getElementById("divideo");
myVideo.play();
if(curIndex!=null){
alldataarr.splice(curIndex,1);
}
if(!timer){
timer = setInterval('change()',30); //随机数据变换速度，越小变换的越快
}
}
function ok(){
var myVideo = document.getElementById("divideo");
myVideo.pause();
clearInterval(timer);
timer=null;
}
function GetRnd(min,max){
curIndex = parseInt(Math.random()*(max-min+1));
return curIndex;
}
</script>
<div class="div-relative">
<div class="div-a">
<div class="video_box">
<video id="divideo" width="100%" height="100%" loop="loop">
<source src="DPIIVideo.mp4" type="video/mp4">
<object data="DPIIVideo.mp4" width="100%" height="100%">
<embed src="DPIIVideo.swf" width="100%" height="100%">
</object>
</video>
</div>
</div>
<div class="div-b">
<div class="logo_box" align="center">北京梦之墨科技有限公司<br/>乘风破浪，梦想起航<br/>年会抽奖</div>
<div class="result_box" id="oknum" align="center">抽奖结果</div>
<div class="button_box" align="center">
<input id="total" class="btn" type="text" value="1" style="width:50px;" hidden="hidden">
<button class="btn" οnclick="start()" accesskey="s">开始(<U>S</U>)</button>
<button class="btn" οnclick="ok()" accesskey="o">停止(<U>O</U>)</button>
</div> <br>
</div>
</div>
</body>
</html>