今天小編給大家分享一下JavaScript怎么實現流氓小廣告效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
我們在瀏覽網頁的時候，經常會遇到各種各樣的垃圾彈窗，當你把它關閉之后，過一段時間他又彈出來，非常的讓人心煩。這種流氓彈窗我們是可以通過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>
以上就是“JavaScript怎么實現流氓小廣告效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
