站長資訊網(wǎng)在上一篇文章《用CSS快速創(chuàng)建高級(jí)模糊感的背景圖像》中給大家介紹了怎么用CSS快速創(chuàng)建高級(jí)模糊感的背景圖像，很炫酷的實(shí)現(xiàn)效果，感興趣的朋友可以去學(xué)習(xí)了解一下~
那么本文的重點(diǎn)則是給大家介紹如何通過前端三劍客（HTML、css、javascript）實(shí)現(xiàn)一個(gè)非常漂亮且實(shí)用的倒計(jì)時(shí)效果。
如果你需要一個(gè)倒計(jì)時(shí)頁面，那就不要錯(cuò)過本文啦~
下面我們直接上完整的代碼：
實(shí)現(xiàn)倒計(jì)時(shí)效果的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style> body, html { height: 100%; margin: 0; } .bgimg { background-image: url('003.jpg'); height: 100%; width:100%; background-position: center; background-size: cover; position: relative; color: white; font-family: "Courier New", Courier, monospace; font-size: 25px; } .topleft { background-image: url('logo.png'); position: absolute; width:100%; height:100%; background-repeat: no-repeat; top: 2px; left: 16px; } .bottomleft { position: absolute; bottom: 0; left: 16px; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } hr { margin: auto; width: 40%; } </style> </head> <body> <div class="bgimg"> <div class="topleft"> <div id="color-overlay"></div> </div> <div class="middle"> <h1>距離2022年春節(jié)還有：</h1> <hr> <p id="demo" style="font-size:30px"></p> </div> <div class="bottomleft"> <p>www.php.cn</p> </div> </div> <script> // 設(shè)定我們倒計(jì)時(shí)的日期 var countDownDate = new Date("2022,2,1").getTime(); // 每1秒更新一次計(jì)數(shù) var countdownfunction = setInterval(function() { // 獲取今天的日期和時(shí)間 var now = new Date().getTime(); // 找出現(xiàn)在與倒數(shù)日期之間的差 var distance = countDownDate - now; // 時(shí)間計(jì)算為天，小時(shí)，分和秒 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 在id="demo"的元素中輸出結(jié)果 document.getElementById("demo").innerHTML = days + "天" + hours + "時(shí)" + minutes + "分" + seconds + "秒"; // 如果倒計(jì)時(shí)結(jié)束了，寫一些文字 if (distance < 0) { clearInterval(countdownfunction); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>
運(yùn)行該文件，效果如下：
（背景圖來源于網(wǎng)絡(luò)，侵刪歉）
想要實(shí)現(xiàn)倒計(jì)時(shí)效果主要是通過javascript來實(shí)現(xiàn)這個(gè)功能，樣式當(dāng)然是通過html/css來設(shè)置，具體的代碼講解我已經(jīng)在上述代碼中通過注釋的方式注明了每步的意思，相信大家可以一目了然~
大家也可以直接復(fù)制上述代碼在本地測試，背景圖或者文字內(nèi)容都可以輕松替換，如果你想要實(shí)現(xiàn)不一樣的倒計(jì)時(shí)效果，那么大家就可以根據(jù)本文內(nèi)容進(jìn)行拓展！學(xué)習(xí)掌握實(shí)現(xiàn)思路是最重要的！
最后如果有疑問，歡迎大家留言評(píng)論！
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》《javascript基礎(chǔ)教程》！
