需求：打开页面只看到DIV2，等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒
我设置的间隔时间是3秒，代码如下：
html+css:
1: <!DOCTYPE HTML>
html>
head>
meta http-equiv="content-type" content="text/html;charset=utf-8">
title>Test</title>
style type="text/css">
8: height: 300px;
10: margin:0 auto;
12: }
14: margin:10px;
16: .div2{
18: height: 100px;
20: }
22: border: 1px dashed red;
24: height: 100px;
26: }
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>
body>
html>
js:
1: window.onload =function() {
3: var div2 = document.getElementById("div2");
5: var closeDiv3 = document.getElementById('closeDiv3');
7:
9: var countTime = 6;
11: function controlTime()
13: /*showTime.innerHTML = countTime +"秒后div2隐藏,div3显示";*/
15: countTime--;
17: {
19: div2.style.display = "none";
21: /*showTime.innerHTML = countTime1 +"秒后div3隐藏,div2显示";*/
23: {
25: div3.style.display = "none";
27: }
29: }
31: div3.onmouseover = function(){
33: closeDiv3.onclick = function(){
35: div3.style.display = "none";
37: /*showTime.innerHTML = countTime+"秒后div2隐藏,div3显示";*/
39: }
40: }
效果截图：
