js倒计时完成后显示DIV层，关闭DIV层，又将重新倒计时，反复循环

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Test</title>
    <style type="text/css">
      .div1{
        height: 300px;
        width: 400px;
        margin:0 auto;
        border: 1px solid red;
      }
      .div2{
        margin: 10px;
        width: 200px;
        height: 100px;
        border: 1px solid blue;
      }
      .div3{
        border: 1px dashed red;
        margin: 10px;
        width: 200px;
        height: 100px;
      }
    </style>
</head>
<body>
    <div class="div1" id="div1">这是div1
      <div class="div2" id="div2">这是div2</div>
      <div class="div3" id="div3">这是div3</div>
    </div>
    <script type="text/javascript">
        //获取div
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");        //计时
        var countTime = 6;
        function controlTime()
        {
          setTimeout(controlTime,1000);
          --countTime;
          if(countTime < 3)
          {
            div2.style.display = "none";
            div3.style.display = "block";
            if(countTime < 0)
            {
              div2.style.display = "block";
              div3.style.display = "none";
              countTime = 6;
            }
          }
        }
        controlTime();
    </script>
</body>
</html>

解决方案 »

  1.   


    我需要能看到秒数在倒计时，而且打开页面只看到DIV2，等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function Test(){
    this.time=5;
    this.eles=this.createDiv();
    this.changeTime();
    this.initEvent();
    }
    Test.prototype.createDiv=function(){
    var div=document.createElement('div');
    var arr=[
      'position:absolute',
    'left:0px',
    'right:0px',
    'top:0px',
    'bottom:0px',
    'opacity:.3',
    'filter:alpha(opacity=30)',
    'background-color:black'
     ]
    div.style.cssText=arr.join(';');
    var span=document.createElement('span');
    span.innerHTML='关闭';
    span.style.cssText='position:absolute;right:20px;color:red;';
    var text=document.createElement('span');
    text.innerHTML=this.time;
    text.style.cssText='position:absolute;top:50%;color:red;left:50%;display:none';
    document.body.appendChild(div);
    document.body.appendChild(span);
    document.body.appendChild(text);

    return{
    'div':div,
    'span':span,
    'text':text
    }
    }
    Test.prototype.changeTime=function(){
    var me=this;
    me.eles.text.innerHTML=me.time--;
    if(me.time==-1){
    me.eles.div.style.display='';
    me.eles.span.style.display='';
    me.eles.text.style.display='none';
    }
    window.setTimeout(function(){
    me.changeTime();
    },1000);
    }
    Test.prototype.initEvent=function(){
    var me=this;
    document.body.onclick=function(e){
    var a=e||window.event;
    var src=a.srcElement||a.target;
    if(src===me.eles.span){
    me.time=5;
    me.eles.div.style.display='none';
    me.eles.span.style.display='none';
    me.eles.text.style.display='';
    }
    }
    }
    window.onload=function(){
    new Test();
    }
    </script>
    </head><body>
    </body>
    </html>
      

  3.   

    前后三秒分开算   有点小bug，你可以自己改改
      

  4.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Test</title>
        <style type="text/css">
          .div1{
            height: 300px;
            width: 400px;
            margin:0 auto;
            border: 1px solid black;
          }
          .div2,.div3{
            margin:10px;
          }
          .div2{
            width: 200px;
            height: 100px;
            border: 1px solid blue;
          }
          .div3{
            border: 1px dashed red;
            width: 200px;
            height: 100px;
            display: none;
          }
        </style>
    </head>
    <body>
        <div class="div1" id="div1">这是div1
          <span id="showTime"></span>
          <div class="div2" id="div2">这是div2</div>
          <div class="div3" id="div3">这是div3
            <button id="closeDiv3">关闭div3</button>
          </div>
        </div>
        <script type="text/javascript">
           window.onload =function() {
              //获取div
            var div2 = document.getElementById("div2");
            var div3 = document.getElementById("div3");
            var closeDiv3 = document.getElementById('closeDiv3');
            var showTime = document.getElementById('showTime');        //计时
            var countTime = 6;
            var out;
            function controlTime()
            {
              showTime.innerHTML = countTime +"秒后div2隐藏,div3显示";
              out = setTimeout(controlTime,1000);
              countTime--;
              if(countTime < 3)
              {
                var countTime1 = countTime+1;
                div2.style.display = "none";
                div3.style.display = "block";
                showTime.innerHTML = countTime1 +"秒后div3隐藏,div2显示";
                if(countTime1 <= 0)
                {
                  div2.style.display = "block";
                  div3.style.display = "none";
                  countTime = 6;
                }
              }
            }
            controlTime();
            div3.onmouseover = function(){
              window.clearTimeout(out);
              closeDiv3.onclick = function(){
                div2.style.display = "block";
                div3.style.display = "none";
                countTime = 6;
                showTime.innerHTML = countTime+"秒后div2隐藏,div3显示";
             }
            }
           }
        </script>
    </body>
    </html>