Web开发 (1): 公司年会抽奖程序

￡神魔★判官ぃ 2022-05-28 09:18 153阅读 0赞

<!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>