用Javascript實現(xiàn)倒計時關閉廣告案例
正在學習大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在很多app與網(wǎng)頁中，我們可以看到這樣的廣告：進入某個網(wǎng)站后，會彈出一個廣告，然后廣告會有倒計時，倒計時結(jié)束，這個廣告便會消失，下面我們用代碼來實現(xiàn)這一功能
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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秒關閉廣告 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> |
演示效果：
右上角便是倒計時
代碼解釋：
這里就是先創(chuàng)建個函數(shù)，設置個全局變量t，然后t就是倒計時的時間，我們在倒計時函數(shù)里面將div里面顯示的文字改為我們的倒計時t，然后來判斷t是否等于0，如果等于0，那么倒計時結(jié)束，將圖片與倒計時盒子隱藏，顯示廣告已結(jié)束的盒子。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44029226/article/details/113737269
