vue 寫倒計時
在用vue的遇到一個問題就是一個頁面裏面有倒計時的時候,刷新頁面會從新倒計時,爲了不讓計時器從新倒計時。想到了一個方法。
原理時這樣的,吧獲取的當前時間的,加上要倒計時的時間存到localStorage中,也就是說獲取到倒計時結束的時間,存到localStorage中,在用的時候是以結束時間爲基礎的,廢話不多說直接上代碼
data() {
return {
time: '',
}
},
created() {
this.endTime();
},
methods: {
//倒計時
endTime() {
let endingTime = new Date().getTime() + 30 * 60 * 1000;
let num = localStorage.getItem("endingTime");
if (localStorage.getItem("endingTime")) {
let diff = num - new Date().getTime();
if (diff <= 0) {
localStorage.removeItem('endingTime');
} else {
let m = Math.floor(diff / 1000 / 60);
let s = Math.floor(diff / 1000 - m * 60);
this.countDown(m, s);
let s2 = s < 10 ? ('0' + s) : s;
this.time = m + '分' + s2 + '秒';
}
} else {
this.countDown(30, 0);
this.time = 29 + '分' + 60 + '秒';
localStorage.setItem("endingTime", endingTime)
}
},
//倒計時
countDown(munite, second) {
let m = munite;
let s = second;
let m2, s2;
let _this = this;
let tiem = setInterval(function () {
s--;
if (s < 0) {
s = 60;
m--;
if (m < 0) {
localStorage.removeItem('endingTime');
_this.time = '00分00秒';
clearTimeout(tiem);
return;
}
}
m2 = m < 10 ? '0' + m : m;
s2 = s < 10 ? ('0' + s) : s;
_this.time = m2 + '分' + s2 + '秒';
}, 1000)
},
}
這樣就不會在頁面刷新的時候從新計時了