我們在瀏覽網頁的時候，經常會遇到各種各樣的垃圾彈窗，當你把它關閉之后，過一段時間他又彈出來，非常的讓人心煩，這種流氓彈窗我們是可以通過JavaScript的 setTimeout() 方法來實作的，
<style>
#ad{
width: 400px;
height: 300px;
display: none;
background-color: #ddd;
position: fixed;
right: 0;
bottom: 0;
}
#close{
float: right;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
color: #fff;
}
</style>
</head>
<body>
<div id="ad">
<p id="close">X</p>
<p>
<span id="time">10</span>
<span>s之后自動關閉廣告</span>
</p>
</div>
<script>
//獲取物件
function get(id){
return document.getElementById(id) ;
}
//呼叫函式獲取物件
var oAd = get('ad') ;
var oTime = get('time') ;
var oClose = get('close') ;
showAd() ;
//封裝函式彈窗廣告
//分析：這時候有兩種方法關閉倒計時 1.廣告結束 ； 2.點擊關閉
function showAd(){
setTimeout(function (){
//顯示彈窗廣告
oAd.style.display = 'block' ;
//設定一個倒計時
var t = setInterval(function (){
//如果倒計時結束，彈窗廣告關閉
oTime.innerHTML--;
//判斷倒計時是否結束
if(oTime.innerHTML < 0){
//關閉彈窗
oAd.style.display = 'none' ;
//清除倒計時
clearInterval(t) ;
//廣告關閉以后，下次還是10s
oTime.innerHTML = 10 ;
//3s之后彈出小廣告
showAd() ;
}
},1000)
//點擊X關閉
oClose.onclick = function() {
//關閉彈窗廣告
oAd.style.display = 'none' ;
//清除計時器
clearInterval(t);
//廣告關閉后，下次還是10s
oTime.innerHTML = 10 ;
showAd()
}
},3000)
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/389181.html
標籤：其他
上一篇：JavaScript做彈出式可拖動登錄框（拖動的模態框）
下一篇：智能搜索框