javascript實(shí)現(xiàn)倒計(jì)時關(guān)閉廣告
更新時間：2021年02月09日 10:34:51 作者：愛前端的茂茂
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時關(guān)閉廣告，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用Javascript實(shí)現(xiàn)倒計(jì)時關(guān)閉廣告案例
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在很多app與網(wǎng)頁中，我們可以看到這樣的廣告：進(jìn)入某個網(wǎng)站后，會彈出一個廣告，然后廣告會有倒計(jì)時，倒計(jì)時結(jié)束，這個廣告便會消失，下面我們用代碼來實(shí)現(xiàn)這一功能
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.djs{
width: 30px;
height: 30px;
position: absolute;
left: 700px;
color: white;
background-color: darkred;
}
.end{
display: none;
}
</style>
</head>
<body>
<div class="djs"></div>
<img class="ad" src="../images/1.png" alt="">
<div class="end">廣告已結(jié)束</div>
<script>
//5秒關(guān)閉廣告
var ad=document.querySelector('.ad')
var div=document.querySelector('.djs')
var end=document.querySelector('.end')
var t=5
fun()
setInterval(fun,1000)
function fun() {
div.innerHTML=t
if (t==0){
ad.style.display='none'
div.style.display='none'
end.style.display='block'
}
t--
}
</script>
</body>
</html>
演示效果：
右上角便是倒計(jì)時
代碼解釋：
這里就是先創(chuàng)建個函數(shù)，設(shè)置個全局變量t，然后t就是倒計(jì)時的時間，我們在倒計(jì)時函數(shù)里面將div里面顯示的文字改為我們的倒計(jì)時t，然后來判斷t是否等于0，如果等于0，那么倒計(jì)時結(jié)束，將圖片與倒計(jì)時盒子隱藏，顯示廣告已結(jié)束的盒子。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法,涉及javascript數(shù)組遍歷及數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
本文給大家簡單介紹了在一個項(xiàng)目中涉及到的javascript使用閉包模擬對象的私有屬性和方法，這里記錄下來，分享給大家。2016-10-10
微信小程序使用this.setData()遇到的問題及解決方案詳解
this.setData估計(jì)是小程序中最經(jīng)常用到的一個方法,但是要注意其實(shí)他是有限制的,忽略這些限制的話,會導(dǎo)致數(shù)據(jù)無法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問題及解決方案,需要的朋友可以參考下2022-08-08
本篇文章主要是對js數(shù)組去重的三種常用方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題，這一篇博文將詳細(xì)的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10
微信小程序官方組件也提供了畫布功能，下面分享一下如何創(chuàng)建微信小程序畫布時鐘2016-12-12
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語言必不可少的語法，在javascript中，變量的聲明相對其他語言來說，算是比較簡單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
js實(shí)現(xiàn)獲取焦點(diǎn)后光標(biāo)在字符串后
這篇文章主要介紹了js實(shí)現(xiàn)獲取焦點(diǎn)后光標(biāo)在字符串后，原理就是獲得焦點(diǎn)后重新把自己復(fù)制粘帖一下，喜歡的朋友可以看看2014-09-09