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>