你看到這篇文章時，倒計(jì)時應(yīng)該已經(jīng)結(jié)束了。
又到了金三銀四季節(jié)，每年這個時候大家都在拼命刷題準(zhǔn)備各大公司的招聘，這個時候我們需要對一些常見的面試題有所了解，比如今天要說的就是我在網(wǎng)上看到的，要你手寫一個 js 倒計(jì)時效果，手寫代碼是什么感覺？速度 70 邁，心情真是嗨，本想好好秀一下的，誰知剛落筆就 ... ... 告辭！不過，多寫代碼確實(shí)可以保持手感，雖然剛開始會一直支支吾吾寫不出，不過越寫越順手，越能發(fā)現(xiàn)自己的知識盲點(diǎn)，查漏補(bǔ)缺。
原理
既然是倒計(jì)時，肯定是要涉及到時間日期的操作了。js 里可以用 new Date() 來創(chuàng)建各種格式的時間日期。要能夠倒計(jì)時，我們需要設(shè)置一個起始時間以及一個終止時間，計(jì)算出這兩段時間的差，然后通過循環(huán)調(diào)用，每隔 1 秒刷新一次就實(shí)現(xiàn)了。假設(shè)我們以當(dāng)前電腦的時間作為起始時間，然后定死一個終止時間，由于起始時間一直在遞增，而終止時間不變，那么通過遞歸后就是一個倒計(jì)時了。整體思路不難理解，不過真正實(shí)現(xiàn)其代碼來還是有諸多需要注意的。
實(shí)戰(zhàn)
知道了大致實(shí)現(xiàn)思路后，你可以試著開始手寫代碼。我們定義一個函數(shù)，名為 countDown 。首先獲取當(dāng)前時間，現(xiàn)在是北京時間 2019 年 3 月 16 日，16 時 57 分，倒計(jì)時 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 為單位。
接著，我們可以將這個時間分別計(jì)算為 天，時，分，秒 了。代碼如下
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 秒，稍微轉(zhuǎn)換就能計(jì)算出上面幾個變量的值。到了這里，有個小細(xì)節(jié)需要注意，如果是 10 以下的數(shù)我們要進(jìn)行補(bǔ)零！。于是我們在寫一個補(bǔ)零函數(shù)，名為 addZero .
function addZero(){
return i < 10 ? "0" + i: i + "";
}
好了，接下來對上面求得的 d,h,m,s 進(jìn)行補(bǔ)零。
d = addZero(d)
h = addZero(h);
m = addZero(m);
s = addZero(s);
最后我們只需要利用 setTimeout 循環(huán)調(diào)用，每隔 1 s 刷新就可以了。
setTimeout(showtime, 1000);
OK! 一個倒計(jì)時函數(shù)大功告成。為了把它顯示到瀏覽器頁面上，我們需要在加點(diǎn) HTML 代碼：
html
<p class="count"></p>
然后在 js 里加上：
js
document.querySelector(".count").innerHTML = `活動倒計(jì)時 $u0z1t8os天 ${h} 時 ${m} 分 ${s} 秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活動已結(jié)束";
return;
}
這里的 if 判斷當(dāng)?shù)褂?jì)時為 0 的時候，就顯示 活動已結(jié)束 , 并且把函數(shù) return 掉。
最終效果
由于上傳 GIF 動圖時出現(xiàn)了點(diǎn)小問題，你可以自己 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 = `活動倒計(jì)時 $u0z1t8os天 ${h} 時 ${m} 分 ${s} 秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活動已結(jié)束";
return;
}
setTimeout(countDown, 1000);
}
}
</script>
</body>
總結(jié)
知識需要通過實(shí)踐來驗(yàn)證，先學(xué)好必備的基礎(chǔ)知識，然后找些 demo 來練習(xí)鞏固，在練習(xí)的過程中也許會發(fā)現(xiàn)自己以前忽視的一些小問題，也就起到了查漏補(bǔ)缺的作用。在 coding 中尋找快樂！
