適用背景:
動態更新倒計時:天、小時、分鍾、秒。
倒計時函數:countDown
(vue 版)
data() {
// vue 定義默認數據
return {
isStart: false,
isEnd: false,
d: 0,
h: 0,
m: 0,
s: 0,
timer: null,
btnInfo: ""
};
},
// 倒計時
countdown() {
// 清除定時器
clearTimeout(this.timer);
const nowTime = new Date().getTime(),
start = "開始時間",
end = "結束時間";
let startTime = new Date(start).getTime(),
endTime = new Date(end).getTime();
// 時間差
let diff = startTime - nowTime;
if (diff <= 0) {
this.isStart = true;
if (endTime - nowTime <= 0) {
this.isStart = false;
this.isEnd = true;
} else {
this.timer = setTimeout(this.countdown, 30000);
}
return;
} else {
// 動態計算 天、小時、分鍾、秒
this.d = Math.floor(diff / 36e5 / 24);
this.h = Math.floor((diff / 36e5) % 24);
this.m = Math.floor((diff / 6e4) % 60);
this.s = Math.floor((diff / 1000) % 60);
// 遞歸調用
this.timer = setTimeout(this.countdown, 1000);
}
}
(JavaScript 版)
// 活動開始時間
const start = "2020/03/16 21:31:00";
// 倒計時函數(傳參數)
function countDown(start) {
// 清除定時器
!!timer && clearTimeout(timer);
// 獲取時間毫秒數
let begin = new Date(start).getTime(),
now = new Date().getTime();
// 判斷當前時間小於開始時間
if (now < begin) {
// 計算時間差
let cha = begin - now;
// 獲取 天時分秒
let day = Math.floor(cha / 36e5 / 24),
hour = Math.floor((cha / 36e5) % 24),
minute = Math.floor((cha / 6e4) % 60),
second = Math.floor((cha / 1000) % 60);
// 拼接字符串
let timeSting = "";
!!day && (timeSting += day + "天");
!!hour && (timeSting += hour + "時");
!!minute && (timeSting += minute + "分");
timeSting += second + "秒";
// 打印字符串
console.log(timeSting);
// 調用封裝的倒計時函數
timer = setTimeout(() => {
countDown(activeStart);
}, 1000);
}
}
// 調用計時器
countDown(start);