广告样式当页面加载后5s刷新在右下角
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gary图片轮播</title> <style type="text/css"> #ad{ width:300px; height: 300px; background-color:antiquewhite; /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/ position: fixed; bottom:0px; right: 0px; display: none; } </style> <script type="text/javascript"> function init(){ setTimeout(showAd,2000) } function showAd(){ var ad = document.getElementById("ad"); ad.style.display ="block"; } function closeAd(){ var ad = document.getElementById("ad"); ad.style.display ="none"; } </script> </head> <body onload="init()"> <div id="ad"> <button onclick="closeAd()">关闭</button> </div> </body> </html>
实现过程
设置广告弹窗样式，将广告样式固定与页面右下角
<body onload="init()"> <div id="ad"> </div> </body>
<style type="text/css"> #ad{ width:300px; height: 300px; background-color:antiquewhite; /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/ position: fixed; bottom:0px; right: 0px; /*display: none;*/ } </style>
设置广告每隔5秒显示出来
function init(){ setTimeout(showAd,2000) } function showAd(){ var ad = document.getElementById("ad"); ad.style.display ="block"; }
添加Button按钮实现广告的关闭
<body onload="init()"> <div id="ad"> <button onclick="closeAd()">关闭</button> </div> </body>
function closeAd(){ var ad = document.getElementById("ad"); ad.style.display ="none"; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gary图片轮播</title> <style type="text/css"> #ad{ width:300px; height: 300px; background-color:antiquewhite; /*绝对定位放置到浏览器右下角，即使有下拉条时广告弹窗也不会改变位置*/ position: fixed; bottom:0px; right: 0px; display: none; } </style> <script type="text/javascript"> function init(){ setTimeout(showAd,2000) } function showAd(){ var ad = document.getElementById("ad"); ad.style.display ="block"; } function closeAd(){ var ad = document.getElementById("ad"); ad.style.display ="none"; } </script> </head> <body onload="init()"> <div id="ad"> <button onclick="closeAd()">关闭</button> </div> </body> </html>