1. 程式人生 > 實用技巧 >js倒計時

js倒計時

計算當前時間

var nowTime = new Date();

設定 結束時間

var endTime = new Date("2020/07/28,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);

渲染

1 document.querySelector(
2 ".count"
3 ).innerHTML = `活動倒計時 ${d}天 ${h} 時 ${m} 分 ${s} 秒`;
4 // 如果 全部毫秒數 小於等於0 提示活動結束
5 if (leftTime <= 0) {
6 document.querySelector(".count").innerHTML = "活動已結束";
7 return;
8 }

注意 當倒數的數到10一下的時候,要進行補零處理

1 function addZero(i) {
2         return i < 10 ? "0" + i : i + "";
3       }
4 
5 // 不足兩位進行補零
6         d = addZero(d);
7         h = addZero(h);
8         m = addZero(m);
9         s = addZero(s);

進行封裝放在定時器裡執行(或者計時器中)

setTimeout(countDown, 1000);
完整程式碼
 1 html:
 2 <div class="count"></div>
 3
4 js 5 window.onload = function () { 6 countDown(); 7 // 十以下的數進行補0 8 function addZero(i) { 9 return i < 10 ? "0" + i : i + ""; 10 } 11 12 function countDown() { 13 // 計算當前時間 14 var nowTime = new Date(); 15 // 計算 結束時間 16 var endTime = new Date("2020/07/28,17:57:00"); 17 // 剩餘的全部 毫秒數 18 var leftTime = parseInt( 19 (endTime.getTime() - nowTime.getTime()) / 1000 20 ); 21 // 計算 天、時、分、秒 22 var d = parseInt(leftTime / (24 * 60 * 60)); 23 var h = parseInt((leftTime / (60 * 60)) % 24); 24 var m = parseInt((leftTime / 60) % 60); 25 var s = parseInt(leftTime % 60); 26 // 不足兩位進行補零 27 d = addZero(d); 28 h = addZero(h); 29 m = addZero(m); 30 s = addZero(s); 31 32 document.querySelector( 33 ".count" 34 ).innerHTML = `活動倒計時 ${d}天 ${h} 時 ${m} 分 ${s} 秒`; 35 // 如果 全部毫秒數 小於等於0 提示活動結束 36 if (leftTime <= 0) { 37 document.querySelector(".count").innerHTML = "活動已結束"; 38 return; 39 } 40 setTimeout(countDown, 1000); 41 } 42 };
View Code