原生Js_实现广告弹窗
生活随笔
收集整理的這篇文章主要介紹了
原生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> Gary-圖片輪播.html?
轉載于:https://www.cnblogs.com/1138720556Gary/p/10453952.html
總結
以上是生活随笔為你收集整理的原生Js_实现广告弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信用卡等级有哪些？各等级额度和年费是怎样
- 下一篇： Ansible批量在远程主机执行命令