最近开发考试模块,需要写一个倒计时,要求刷新不重置(目前存储在sessionStorage中,可以根据需求自行更换),自动补零.
<template>
<div>
<div class="time">{{countDown}}</div>
</div>
</template>
data(){
return {
countDownTime: 180, //设置默认时间,(单位秒)
timer: null, //计数器名称,便于后面清除
}
},
created() {
//初始化时读取sessionStorage中储存的数据,有就设置为countDownTime,没有就根据自己逻辑设置countDownTime if (window.sessionStorage.getItem("exam_time") == null) {
this.startCountDown();
} else {
this.countDownTime = Number(window.sessionStorage.getItem("exam_time"));
this.startCountDown();
}
},
computed: {
// 计算属性自动计算countDownTime,并转换为倒计时
countDown() {
const minutes = Math.floor(this.countDownTime / 60);
const seconds = this.countDownTime % 60;
const m = minutes < 10 ? "0" + minutes : minutes;
const s = seconds < 10 ? "0" + seconds : seconds;
return `${m}:${s}`;
},
},
methods:{
startCountDown() {
this.timer = setInterval(() => {
if (this.countDownTime <= 0) {
//当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
clearInterval(this.timer);
sessionStorage.removeItem("exam_time");
alert("提交试卷");
} else if (this.countDownTime > 0) {
//每秒让countDownTime -1秒,并设置到sessionStorage中
this.countDownTime--;
window.sessionStorage.setItem("exam_time", this.countDownTime);
}
}, 1000);
},
}