你看到這篇文章時(shí)褒翰，倒計(jì)時(shí)應(yīng)該已經(jīng)結(jié)束了盈包。
又到了金三銀四季節(jié)，每年這個(gè)時(shí)候大家都在拼命刷題準(zhǔn)備各大公司的招聘旬牲，這個(gè)時(shí)候我們需要對(duì)一些常見(jiàn)的面試題有所了解仿粹，比如今天要說(shuō)的就是我在網(wǎng)上看到的搁吓，要你手寫(xiě)一個(gè) js 倒計(jì)時(shí)效果，手寫(xiě)代碼是什么感覺(jué)吭历？速度 70 邁堕仔，心情真是嗨，本想好好秀一下的毒涧，誰(shuí)知?jiǎng)偮涔P就 ... ... 告辭贮预！不過(guò)，多寫(xiě)代碼確實(shí)可以保持手感契讲，雖然剛開(kāi)始會(huì)一直支支吾吾寫(xiě)不出仿吞，不過(guò)越寫(xiě)越順手，越能發(fā)現(xiàn)自己的知識(shí)盲點(diǎn)捡偏，查漏補(bǔ)缺唤冈。
原理
既然是倒計(jì)時(shí)，肯定是要涉及到時(shí)間日期的操作了银伟。js 里可以用 new Date() 來(lái)創(chuàng)建各種格式的時(shí)間日期你虹。要能夠倒計(jì)時(shí)，我們需要設(shè)置一個(gè)起始時(shí)間以及一個(gè)終止時(shí)間彤避，計(jì)算出這兩段時(shí)間的差傅物，然后通過(guò)循環(huán)調(diào)用，每隔 1 秒刷新一次就實(shí)現(xiàn)了琉预。假設(shè)我們以當(dāng)前電腦的時(shí)間作為起始時(shí)間董饰，然后定死一個(gè)終止時(shí)間，由于起始時(shí)間一直在遞增圆米，而終止時(shí)間不變卒暂，那么通過(guò)遞歸后就是一個(gè)倒計(jì)時(shí)了。整體思路不難理解娄帖，不過(guò)真正實(shí)現(xiàn)其代碼來(lái)還是有諸多需要注意的也祠。
實(shí)戰(zhàn)
知道了大致實(shí)現(xiàn)思路后，你可以試著開(kāi)始手寫(xiě)代碼近速。我們定義一個(gè)函數(shù)诈嘿，名為 countDown 。首先獲取當(dāng)前時(shí)間数焊，現(xiàn)在是北京時(shí)間 2019 年 3 月 16 日永淌，16 時(shí) 57 分，倒計(jì)時(shí) 1 小時(shí)佩耳，那么終止時(shí)間是 2019 年 3 月 16 日遂蛀，17 時(shí) 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 保存著兩個(gè)時(shí)間的差值干厚，getTime() 方法獲取到時(shí)間戳李滴，由于它是以 ms 為單位的螃宙，我們需要精確到秒就可以，所以除以 1000 就是以 s 為單位所坯。
接著谆扎，我們可以將這個(gè)時(shí)間分別計(jì)算為 天，時(shí)芹助，分堂湖，秒 了。代碼如下
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 小時(shí)状土，1 小時(shí) 60 分鐘无蜂，1 分鐘 60 秒，稍微轉(zhuǎn)換就能計(jì)算出上面幾個(gè)變量的值蒙谓。到了這里斥季，有個(gè)小細(xì)節(jié)需要注意，如果是 10 以下的數(shù)我們要進(jìn)行補(bǔ)零累驮！酣倾。于是我們?cè)趯?xiě)一個(gè)補(bǔ)零函數(shù)，名為 addZero .
function addZero(){
return i < 10 ? "0" + i: i + "";
}
好了谤专，接下來(lái)對(duì)上面求得的 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! 一個(gè)倒計(jì)時(shí)函數(shù)大功告成稚铣。為了把它顯示到瀏覽器頁(yè)面上，我們需要在加點(diǎn) HTML 代碼：
html
<p class="count"></p>
然后在 js 里加上：
js
document.querySelector(".count").innerHTML = `活動(dòng)倒計(jì)時(shí) $ef5b5tj天 ${h} 時(shí) ${m} 分 ${s} 秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活動(dòng)已結(jié)束";
return;
}
這里的 if 判斷當(dāng)?shù)褂?jì)時(shí)為 0 的時(shí)候墅垮，就顯示 活動(dòng)已結(jié)束 , 并且把函數(shù) return 掉。
最終效果
由于上傳 GIF 動(dòng)圖時(shí)出現(xiàn)了點(diǎn)小問(wè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 = `活動(dòng)倒計(jì)時(shí) $vsewa7x天 ${h} 時(shí) ${m} 分 ${s} 秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活動(dòng)已結(jié)束";
return;
}
setTimeout(countDown, 1000);
}
}
</script>
</body>
總結(jié)
知識(shí)需要通過(guò)實(shí)踐來(lái)驗(yàn)證，先學(xué)好必備的基礎(chǔ)知識(shí)螟够，然后找些 demo 來(lái)練習(xí)鞏固灾梦，在練習(xí)的過(guò)程中也許會(huì)發(fā)現(xiàn)自己以前忽視的一些小問(wèn)題，也就起到了查漏補(bǔ)缺的作用妓笙。在 coding 中尋找快樂(lè)若河！
