问题：关于坛友的一个定时重复显示和隐藏div的实现

来源：互联网发布：Ubuntu安装VNC 编辑：程序博客网时间：2024/06/06 05:46

需求：打开页面只看到DIV2，等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒

我设置的间隔时间是3秒，代码如下：

html+css:

   1: <!DOCTYPE HTML>

   2: <html>

   3:     <head>

   4:         <meta http-equiv="content-type" content="text/html;charset=utf-8">

   5:         <title>Test</title>

   6:     <style type="text/css">

   7:       .div1{

   8:         height: 300px;

   9:         width: 400px;

  10:         margin:0 auto;

  11:         border: 1px solid black;

  12:       }

  13:       .div2,.div3{

  14:         margin:10px;

  15:       }

  16:       .div2{

  17:         width: 200px;

  18:         height: 100px;

  19:         border: 1px solid blue;

  20:       }

  21:       .div3{

  22:         border: 1px dashed red;

  23:         width: 200px;

  24:         height: 100px;

  25:         display: none;

  26:       }

  27:     </style>

  28:     </head>

  29:     <body>

  30:     <div class="div1" id="div1">这是div1

  31:       <!-- <span id="showTime"></span> -->

  32:       <div class="div2" id="div2">这是div2</div>

  33:       <div class="div3" id="div3">这是div3

  34:         <button id="closeDiv3">关闭div3</button>

  35:       </div>

  36:     </div>

  37:     </body>

  38: </html>

js:

   1: window.onload =function() {

   2:          //获取div

   3:        var div2 = document.getElementById("div2");

   4:        var div3 = document.getElementById("div3");

   5:        var closeDiv3 = document.getElementById('closeDiv3');

   6:        /*var showTime = document.getElementById('showTime');*/

7:

   8:        //计时

   9:        var countTime = 6;

  10:        var out;

  11:        function controlTime()

  12:        {

  13:          /*showTime.innerHTML = countTime +"秒后div2隐藏,div3显示";*/

  14:          out = setTimeout(controlTime,1000);

  15:          countTime--;

  16:          if(countTime < 3)

  17:          {

  18:            var countTime1 = countTime+1;

  19:            div2.style.display = "none";

  20:            div3.style.display = "block";

  21:            /*showTime.innerHTML = countTime1 +"秒后div3隐藏,div2显示";*/

  22:            if(countTime1 <= 0)

  23:            {

  24:              div2.style.display = "block";

  25:              div3.style.display = "none";

  26:              countTime = 6;

  27:            }

  28:          }

  29:        }

  30:        controlTime();

  31:        div3.onmouseover = function(){

  32:          window.clearTimeout(out);

  33:          closeDiv3.onclick = function(){

  34:            div2.style.display = "block";

  35:            div3.style.display = "none";

  36:            countTime = 6;

  37:            /*showTime.innerHTML = countTime+"秒后div2隐藏,div3显示";*/

  38:         }

  39:        }

  40:       }

效果截图：

来源：http://www.ido321.com/582.html

1 0