js倒計時
阿新 • • 發佈:2020-07-20
計算當前時間
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> 3View Code4 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 };