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> 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页