javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告
用Javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告案例
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在很多app與網(wǎng)頁(yè)中，我們可以看到這樣的廣告：進(jìn)入某個(gè)網(wǎng)站后，會(huì)彈出一個(gè)廣告，然后廣告會(huì)有倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束，這個(gè)廣告便會(huì)消失，下面我們用代碼來(lái)實(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ì)時(shí)
代碼解釋：
這里就是先創(chuàng)建個(gè)函數(shù)，設(shè)置個(gè)全局變量t，然后t就是倒計(jì)時(shí)的時(shí)間，我們?cè)诘褂?jì)時(shí)函數(shù)里面將div里面顯示的文字改為我們的倒計(jì)時(shí)t，然后來(lái)判斷t是否等于0，如果等于0，那么倒計(jì)時(shí)結(jié)束，將圖片與倒計(jì)時(shí)盒子隱藏，顯示廣告已結(jié)束的盒子。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)獲取兩個(gè)排序數(shù)組的中位數(shù)算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取兩個(gè)排序數(shù)組的中位數(shù)算法,涉及javascript數(shù)組遍歷及數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
javascript使用閉包模擬對(duì)象的私有屬性和方法
本文給大家簡(jiǎn)單介紹了在一個(gè)項(xiàng)目中涉及到的javascript使用閉包模擬對(duì)象的私有屬性和方法，這里記錄下來(lái)，分享給大家。2016-10-10
微信小程序使用this.setData()遇到的問(wèn)題及解決方案詳解
this.setData估計(jì)是小程序中最經(jīng)常用到的一個(gè)方法,但是要注意其實(shí)他是有限制的,忽略這些限制的話,會(huì)導(dǎo)致數(shù)據(jù)無(wú)法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問(wèn)題及解決方案,需要的朋友可以參考下2022-08-08
本篇文章主要是對(duì)js數(shù)組去重的三種常用方法進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
理解Javascript_15_作用域分配與變量訪問(wèn)規(guī)則,再送個(gè)閉包
在閱讀本博文之前，請(qǐng)先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問(wèn)題，這一篇博文將詳細(xì)的說(shuō)明函數(shù)對(duì)象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10
微信小程序官方組件也提供了畫(huà)布功能，下面分享一下如何創(chuàng)建微信小程序畫(huà)布時(shí)鐘2016-12-12
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語(yǔ)言必不可少的語(yǔ)法，在javascript中，變量的聲明相對(duì)其他語(yǔ)言來(lái)說(shuō)，算是比較簡(jiǎn)單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲(chǔ)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下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