javascript实战——广告弹窗实现
效果展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 <style type="text/css"> 7 #ad{ 8 width: 300px; 9 height: 300px; 10 background-color: aquamarine; 11 position: fixed; 12 bottom: 0px; 13 right: 0px; 14 display: none; 15 } 16 </style> 17 <script type="text/javascript"> 18 function init() { 19 window.setTimeout(showAd,2000) 20 } 21 function showAd() { 22 var ad = document.getElementById("ad"); 23 ad.style.display="block"; 24 } 25 function closeAd() { 26 var ad = document.getElementById("ad"); 27 ad.style.display="none"; 28 } 29 </script> 30 </head> 31 <body onload="init()"> 32 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 33 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 34 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 35 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 36 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 37 <div id="ad"> 38 <button onclick="closeAd()">关闭</button> 39 </div> 40 </body> 41 </html>
