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