倒計時和跳過廣告
最近打開手機上的app，映入眼簾的都是一個幾秒的開屏廣告，帶有倒計時，一般為5秒，時間一到廣告窗口自動關(guān)閉，如果不喜歡的話可以點擊跳過，跳過廣告其實質(zhì)應(yīng)該就是關(guān)閉廣告。以前用JavaScript做過一個定時關(guān)閉的廣告，于是把代碼完善了一下，加上倒計時效果和實現(xiàn)跳過部分的代碼。
文章來源地址http://www.zghlxwxcb.cn/news/detail-702277.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定時關(guān)閉的廣告</title>
<style type="text/css">
.main img {
width: 100%;
}
.adv {
position: absolute;
z-index: 9;
width: 616px;
height: 395px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.adv .right {
position: absolute;
right:0;
top:10px;
font-size: 14px;
color:#fff;
cursor: pointer;
background-color: #333;
border-radius: 10px;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<img src="images/gugong.png">
</div>
<div class="adv">
<div class="right">
<span id="counting">5</span>秒跳過
</div>
<div><img src="images/adv.png" alt=""></div>
</div>
<script>
function closeAdv() { //關(guān)閉廣告窗口
document.querySelector('.adv').style.display = "none";
}
//點擊跳過，關(guān)閉廣告
var skip = document.querySelector('.right');
skip.addEventListener('click',closeAdv)
//倒計時關(guān)閉廣告
var seconds = 5; //秒數(shù)
var count = setInterval(countDown, 1000);
function countDown() { //倒計時函數(shù)
seconds--;
if (seconds == 0) {
closeAdv();
clearInterval(count);
}else{
document.querySelector("#counting").innerText = seconds;
}
}
</script>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-702277.html
到了這里，關(guān)于JavaScript實現(xiàn)廣告倒計時和跳過廣告的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
