在做一个题库管理的项目,其中有个功能是学生考试时会有个倒计时的时间显示
使用的vue2+elementui
<el-statistic
ref="statistic"
format="mm:ss"
:value="deadline"
time-indices
></el-statistic>
data() {
return {
deadline: 0,
timer: null,
alerted: false, // 用于记录是否已经提示过
};
},
mounted() {
this.startCountdown();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
const remainingTime = this.deadline - Date.now();
if (remainingTime > 1000) {
if (remainingTime <= 10 * 60 * 1000 && !this.alerted) { // 10分钟的毫秒数
this.alerted = true; // 标记已经提示过
this.$message.warning({
title: "提示",
message: "剩余时间不足十分钟,请尽快完成",
});
}
this.deadline--;
} else {
clearInterval(this.timer);
this.hilarity();
}
}, 1000); // 一秒钟更新一次倒计时
},
hilarity() {
this.$message.warning({
title: "提示",
message: "时间已到"
});
}
}