javascript實現倒計時關閉廣告
用Javascript實現倒計時關閉廣告案例
正在學習大前端中,有代碼和思路不規范不正確的地方往多多包涵,感謝指教
在很多app與網頁中,我們可以看到這樣的廣告:進入某個網站後,會彈出一個廣告,然後廣告會有倒計時,倒計時結束,這個廣告便會消失,下面我們用代碼來實現這一功能
代碼如下:
<!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">廣告已結束</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>
演示效果:
右上角便是倒計時
代碼解釋:
這裡就是先創建個函數,設置個全局變量t,然後t就是倒計時的時間,我們在倒計時函數裡面將div裡面顯示的文字改為我們的倒計時t,然後來判斷t是否等於0,如果等於0,那麼倒計時結束,將圖片與倒計時盒子隱藏,顯示廣告已結束的盒子。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript操作元素教你改變頁面內容樣式
- JavaScript仿京東實現秒殺倒計時案例詳解
- 用javascript實現倒計時效果
- JavaScript實現前端網頁版倒計時
- JavaScript文檔對象模型DOM