當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS 实现一个倒计时

發布時間：2024/1/1 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 实现一个倒计时小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

你看到這篇文章時，倒計時應該已經結束了。

又到了金三銀四季節，每年這個時候大家都在拼命刷題準備各大公司的招聘，這個時候我們需要對一些常見的面試題有所了解，比如今天要說的就是我在網上看到的，要你手寫一個 js 倒計時效果，手寫代碼是什么感覺？速度 70 邁，心情真是嗨，本想好好秀一下的，誰知剛落筆就 … … 告辭！不過，多寫代碼確實可以保持手感，雖然剛開始會一直支支吾吾寫不出，不過越寫越順手，越能發現自己的知識盲點，查漏補缺。

原理

既然是倒計時，肯定是要涉及到時間日期的操作了。js 里可以用 new Date() 來創建各種格式的時間日期。要能夠倒計時，我們需要設置一個起始時間以及一個終止時間，計算出這兩段時間的差，然后通過循環調用，每隔 1 秒刷新一次就實現了。假設我們以當前電腦的時間作為起始時間，然后定死一個終止時間，由于起始時間一直在遞增，而終止時間不變，那么通過遞歸后就是一個倒計時了。整體思路不難理解，不過真正實現其代碼來還是有諸多需要注意的。

實戰

知道了大致實現思路后，你可以試著開始手寫代碼。我們定義一個函數，名為 countDown 。首先獲取當前時間，現在是北京時間 2019 年 3 月 16 日，16 時 57 分，倒計時 1 小時，那么終止時間是 2019 年 3 月 16 日，17 時 57 分。

function countDown(){var nowtime = new Date();var endtime = new Date("2019/03/16,17:57:00");var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); }

lefttime 保存著兩個時間的差值，getTime() 方法獲取到時間戳，由于它是以 ms 為單位的，我們需要精確到秒就可以，所以除以 1000 就是以 s 為單位。
接著，我們可以將這個時間分別計算為天，時，分，秒了。代碼如下

var d = parseInt(lefttime / (24*60*60))var h = parseInt(lefttime / (60 * 60) % 24);var m = parseInt(lefttime / 60 % 60);var s = parseInt(lefttime % 60);

1 天 24 小時，1 小時 60 分鐘，1 分鐘 60 秒，稍微轉換就能計算出上面幾個變量的值。到了這里，有個小細節需要注意，如果是 10 以下的數我們要進行補零！。于是我們在寫一個補零函數，名為 addZero .

function addZero(){return i < 10 ? "0" + i: i + ""; }

好了，接下來對上面求得的 d,h,m,s 進行補零。

d = addZero(d)h = addZero(h);m = addZero(m);s = addZero(s);

最后我們只需要利用 setTimeout 循環調用，每隔 1 s 刷新就可以了。

setTimeout(showtime, 1000);

OK! 一個倒計時函數大功告成。為了把它顯示到瀏覽器頁面上，我們需要在加點 HTML 代碼：

html <p class="count"></p>

然后在 js 里加上：

js document.querySelector(".count").innerHTML = `活動倒計時 $ozvdkddzhkzd天 ${h} 時 ${m} 分 ${s} 秒`; if (lefttime <= 0) {document.querySelector(".count").innerHTML = "活動已結束";return; }

這里的 if 判斷當倒計時為 0 的時候，就顯示活動已結束 , 并且把函數 return 掉。

最終效果

由于上傳 GIF 動圖時出現了點小問題，你可以自己 run 下代碼并到瀏覽器查看效果，這樣記憶更深哦~

完整代碼

<body><p class="count"></p><script>window.onload = function () {countDown();function addZero(i) {return i < 10 ? "0" + i: i + "";}function countDown() {var nowtime = new Date();var endtime = new Date("2019/03/16,17:57:00");var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);var d = parseInt(lefttime / (24*60*60))var h = parseInt(lefttime / (60 * 60) % 24);var m = parseInt(lefttime / 60 % 60);var s = parseInt(lefttime % 60);d = addZero(d)h = addZero(h);m = addZero(m);s = addZero(s);document.querySelector(".count").innerHTML = `活動倒計時 $ozvdkddzhkzd天 ${h} 時 ${m} 分 ${s} 秒`;if (lefttime <= 0) {document.querySelector(".count").innerHTML = "活動已結束";return;}setTimeout(countDown, 1000);}}</script> </body>