需求：打开页面只看到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
时间： 2024-08-08 09:29:17