Vue 封装防刷新考试倒计时组件的实现

  更新时间：2020年06月05日 09:22:43 作者：Vam的金豆之路

  这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现js 倒计时防刷新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  本文详细的介绍了防刷新考试倒计时组件js 倒计时防刷新，分享给大家，也给自己留个笔记，感兴趣的可以了解下

  <pre class="brush:js;">

<p>00:{{timerCount2}}:{{timerCount1}}

重新计时

export default {
name: "Time",
data() {
return {
timeSeconds: 0,
timeMinutes: 0,
seconds: 59, // 秒
minutes: 1, // 分
timer: null
};
},
methods: {
num(n) {
return n < 10 ? "0" + n : "" + n;
},
// 重新计时
reset() {
sessionStorage.removeItem("answered");
window.location.reload();
localStorage.removeItem("startTime1");
localStorage.removeItem("startTime2");
clearInterval(this.timer);
},
// 清除
clear() {
localStorage.removeItem("startTime1");
localStorage.removeItem("startTime2");
sessionStorage.setItem("answered", 1);
clearInterval(this.timer);
},
// 倒计时
timing() {
let [startTime1, startTime2] = [ localStorage.getItem("startTime1"), localStorage.getItem("startTime2") ];
let nowTime = new Date().getTime();
if (startTime1) {

let surplus = this.seconds - parseInt((nowTime - startTime1) / 1000);
this.timeSeconds = surplus  {
if ( this.timeSeconds == 0 && this.timeMinutes != 0 && this.timeMinutes > 0 ) {
 let nowTime = new Date().getTime();
 this.timeSeconds = this.seconds;
 localStorage.setItem("startTime1", nowTime);
 this.timeMinutes--;
 localStorage.setItem("startTime2", this.timeMinutes);
} else if (this.timeMinutes == 0 && this.timeSeconds == 0) {
 this.timeSeconds = 0;
 this.clear();
 alert("考试时间到");
} else {
 this.timeSeconds--;
}

}, 1000);
}
},
mounted() {
if (sessionStorage.getItem("answered") != 1) {
this.timing();
}
},
computed: {
timerCount1() {
return this.timeSeconds < 10 ? "0" + this.timeSeconds : "" + this.timeSeconds;
},
timerCount2() {
return this.timeMinutes < 10 ? "0" + this.timeMinutes : "" + this.timeMinutes;
}
},
destroyed() {
// 退出后清除计时器
if (this.timer) {
clearInterval(this.timer);
}
}
};

.time {
color: #f72a3a;
font-weight: bold;
font-size: 26px;
}
</pre></p>
  到此这篇关于Vue 封装防刷新考试倒计时组件的实现的文章就介绍到这了,更多相关Vue 防刷新考试倒计时组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！