方法一：js實現
html:讀取相應的變量
js:聲明變量，調用定時器前先判斷好是否已經超過時間，如果沒有超過則開始計時器 調用函數，當倒計時到最后一秒時，清除定時器。
計算時分秒的時候要用Math.floor()往下取整，否則容易產生一秒跳兩秒的情況。當達到期限時要清除定時器。
實現效果如圖：
代碼如下：
counted () {
const endDate = new Date("2021-02-06T19:20:00").getTime()
const nowDate = new Date().getTime()
if(endDate > nowDate) {
this.countdown = setInterval(() => {
this.computedCountDown()
},1000)
} else {
clearInterval(this.countdown)
this.countdown = ''
}
},
computedCountDown () {
const endDate = new Date("2021-02-06T19:20:00").getTime()
const nowDate = new Date().getTime()
const leftTime = parseInt((endDate - nowDate) / 1000)
this.day = Math.floor(leftTime / ( 60 * 60 * 24 )) > 9 ? Math.floor(leftTime / ( 60 * 60 * 24 )) : '0' + Math.floor(leftTime / ( 60 * 60 * 24 ))
this.hour = Math.floor(leftTime / ( 60 * 60 ) % 24) > 9 ? Math.floor(leftTime / ( 60 * 60 ) % 24) : '0' + Math.floor(leftTime / ( 60 * 60 ) % 24)
this.minute = Math.floor(leftTime / ( 60 ) % ( 60 )) > 9 ? Math.floor(leftTime / ( 60 ) % ( 60 )) : '0' + Math.floor(leftTime / ( 60 ) % ( 60 ))
this.seconds = Math.floor(leftTime % ( 60 )) > 9 ? Math.floor(leftTime % ( 60 )) : '0' + Math.floor(leftTime % ( 60 ))
if (nowDate >= endDate) {
clearInterval(this.countdown)
this.countdown = ''
}
}
方法二：vue實現
html:
js:
watch監聽器
methods：
實現效果如圖;
代碼如下：
created () {
this.computeLeftTime()
this.countDown = setInterval(() => {
this.computeLeftTime()
}, 1000)
},
watch: {
$route: {
handler: function (value) {
if (value.params.id) {
this.computeLeftTime()
this.countDown = setInterval(() => {
this.computeLeftTime()
}, 1000)
} else {
clearInterval(this.countDown)
this.countDown = ''
}
},
deep: true
},
}
methods： {
computeLeftTime () { // 計算倒計時
const endDate = new Date(new Date(期限時間))
const nowDate = new Date()
if (期限時間 && new Date(期限時間) <= new Date()) {
clearInterval(this.countDown)
// 更新項目狀態
this.$emit('reflash')
} else {
const totalSeconds = parseInt((endDate - nowDate) / 1000)
// 天數
this.leftDay = Math.floor(totalSeconds / (60 * 60 * 24))
// 取模（余數）
var modulo = totalSeconds % (60 * 60 * 24)
// 小時數
this.leftHour = Math.floor(modulo / (60 * 60)) > 9 ? Math.floor(modulo / (60 * 60)) : '0' + Math.floor(modulo / (60 * 60)).toString()
modulo = modulo % (60 * 60)
// 分鍾
this.leftMinute = Math.floor(modulo / 60) > 9 ? Math.floor(modulo / 60) : '0' + Math.floor(modulo / 60).toString()
// 秒
this.leftSecond = modulo % 60 > 9 ? modulo % 60 : '0' + (modulo % 60).toString()
}
},
}