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í)
代碼解釋?zhuān)?/strong>
這里就是先創(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)文章
寫(xiě)js時(shí)遇到的一些小問(wèn)題,需要的朋友可以參考下。2010-12-12
javaScript合并對(duì)象的幾個(gè)常見(jiàn)方式
JavaScirpt中有很多對(duì)象合并的方法,今天就做個(gè)筆記,記錄一下這些方法,下面這篇文章主要介紹了javaScript合并對(duì)象的多種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這里給大家推薦一款自己封裝的js時(shí)間日期格式化的函數(shù)，非常的簡(jiǎn)潔實(shí)用，分享給有需要的小伙伴2014-12-12
這篇文章主要介紹了js正則表達(dá)式中exec用法,實(shí)例分析了javascript中使用exec執(zhí)行正則表達(dá)式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Boostrap基礎(chǔ)教程之JavaScript插件篇
Boostrap提供了12種JavaScript插件，在本文中給大家介紹了，不知道的朋友可以參考下，本文重點(diǎn)給大家介紹bootstrap基礎(chǔ)之js插件，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
最近華為鴻蒙OS 2.0正式開(kāi)源！關(guān)于鴻蒙的教程其實(shí)網(wǎng)上也已經(jīng)有一些嘗鮮的小伙伴分享了相關(guān)文章，這篇文章主要為大家詳細(xì)介紹了鴻蒙系統(tǒng)中的 JS 開(kāi)發(fā)框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了JS命令模式例子之菜單程序,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下2016-01-01
js keycode快捷鍵大全 并附有簡(jiǎn)單使用說(shuō)明
js keycode快捷鍵大全 并附有簡(jiǎn)單使用說(shuō)明，方便大家使用。2010-10-10