第四十节 JavaScript中倒计时弹框实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div{
 8             margin: 50px auto 0;
 9             background-color: gold;
10             height: 300px;
11             width: 300px;
12             display: none;
13         }
14 
15         h3{
16             text-align: center;
17         }
18 
19         p{
20             text-align: center;
21             line-height: 300px;
22         }
23     </style>
24     <script type="text/javascript">
25         window.onload = function(){
26                 
27             var oBtn01 = document.getElementById('btn01');
28             var oDiv1 = document.getElementById('div1');
29             var oP01 = document.getElementById('p01');
30             var i = 5;
31 
32             oBtn01.onclick = function(){
33                 oDiv1.style.display = 'block';
34                 var timer = setInterval(function(){                
35                     i-- ;
36                     var sTr = '还有' + i + '秒关闭弹窗';
37                     oP01.innerHTML = sTr;
38                     if (i==0) 
39                     {
40                         oDiv1.style.display = 'none';
41                         clearInterval(timer);
42                         i=5;
43                         oP01.innerHTML = '还有5秒关闭弹窗';
44                     }
45                 },1000);
46             }                    
47         }
48     </script>
49 </head>
50 <body>
51     <input type="button" name="" value="弹出弹框" id="btn01">
52     <div id="div1" display='none'>
53         <h3>弹框标题</h3>
54         <p id="p01">还有5秒关闭弹窗</p>
55     </div>
56 </body>
57 </html>