javascript
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 為單位。
接著，我們可以將這個時間分別計算為 天，時，分，秒 了。代碼如下
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 = `活動倒計時 $ze8trgl8bvbq天 ${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 = `活動倒計時 $ze8trgl8bvbq天 ${h} 時 ${m} 分 ${s} 秒`;if (lefttime <= 0) {document.querySelector(".count").innerHTML = "活動已結束";return;}setTimeout(countDown, 1000);}}</script> </body>總結
知識需要通過實踐來驗證，先學好必備的基礎知識，然后找些 demo 來練習鞏固，在練習的過程中也許會發現自己以前忽視的一些小問題，也就起到了查漏補缺的作用。在 coding 中尋找快樂！
總結
以上是生活随笔為你收集整理的JS 实现一个倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百数返乡登记表上线，支持返乡防疫工作
- 下一篇： UML类图和包图