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

缺乏、安全感 2022-08-12 01:08 125阅读 0赞

需求：打开页面只看到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:

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');*/

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:       }

效果截图：

![SouthEast][]![SouthEast 1][]

来源：[http://www.ido321.com/582.html][http_www.ido321.com_582.html]

[SouthEast]: https://img-blog.csdn.net/20140912100153606?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220810/3b31913ccf5a488dbc119e6df78b739d.png
[http_www.ido321.com_582.html]: http://www.ido321.com/582.html