javascript 实现遮盖层效果-CFANZ编程社区

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
   //大的div对象
    var coverLayer ;
    //每次加载的索引
    var index = 0;
    //定时器对象
    var times;
    function show(){ 
   //获得遮盖层的div对象
      coverLayer =  document.getElementById("coverLayer"); 
      coverLayer.style.width = document.documentElement.scrollWidth+"px"; 
      coverLayer.style.height = document.documentElement.scrollHeight+"px"; 
      coverLayer.style.display = "block"; 
   //实现显示的图片或文字区域居中
      var height = document.documentElement.scrollHeight/2 -50;
   var width = document.documentElement.scrollWidth/2 -50;
   document.getElementById("spanCover").style.position="absolute";
   document.getElementById("spanCover").style.top= height+"px";
   document.getElementById("spanCover").style.left= width+"px";
   //设置定时器实现动画效果
   window.setInterval("changeHTML()",1000); 
   } 
   //拼接显示的文字信息
  function changeHTML(){
   index = index +1;
   var htmls = "";
   var point = ".";
   htmls = "正在执行请稍后";
   if(index > 6){
    index = 0;
    htmls = htmls; 
   }else{
    var s =""
    for(var i = 0;i< index ; i++){
     s = s + point
    }
    htmls = htmls +s;
   }
   document.getElementById("spanCover").innerHTML = htmls;
  }
  function hidden(){
  //取消定时器
 window.clearInterval(times);
 //隐藏
 coverLayer.style.display="none";
  }
  </script>
<style type="text/css">
#coverLayer{ 
    background:gray; 
    position:absolute; 
    left:0px; 
    top:0px; 
    display:none; 
    z-index:20; 
    filter:alpha(opacity=50); 
    opacity:0.6 !important; 
    } 
</style>
 </head>
 <body><input type="button" value="现实" name="dfsdsd" οnclick="show()" />
 <div id="coverLayer"  style="display:none;color:red;font-size:18px;" align="center" ><span id="spanCover" >正在执行请稍后</span></div>
 </body>
</html>