原生Js_实现广告弹窗

　　广告样式当页面加载后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>

Gary-图片轮播.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>