前言
本文章将发布vue实现倒计时定时器，可用于考试系统自动交卷、商城未付款倒计时取消订单等效果
同时，如不清楚vue时间处理，可查看我上一个文章
vue时间处理
倒计时定时器
为了制作倒计时定时器，还需要将时分秒转时间戳
注意：一般倒计时皆为HH:mm:ss 时分秒形式，本方法不适用于年月日 时分秒的形式，如需要，则需要根据我本篇文章进行改造。处理时间的代码
以下为制造倒计时效果代码
<template>
// 显示剩余时间
<div style="border: 1px solid gray">{{ restTime}}</div>
</template>
<script>
export default {
name: "xxx",
data () {
return {
restTime: "", // 剩余时间
startDataTime: "2022-06-09 20:00:00", // 开始时间，自己设置或数据库获取
endDataTime: "2022-06-09 21:00:00", // 结束时间，自己设置或数据库获取
timeStamp: null, // 接收剩余时间戳
timer: null
}
},
methods: {
// 时间戳转时分秒
toHHmmss (data) {
var s;
var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (data % (1000 * 60)) / 1000;
s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
if (s.length>8){
s= s.slice(0,8)
}
return s;
},
// 时分秒转时间戳
toTimeStamp(date) {
var s = "";
var hour = date.split(":")[0];
var min = date.split(":")[1];
var sec = date.split(":")[2];
s = Number(hour * 3600) + Number(min * 60) + Number(sec);
s = s*1000
return s;
},
// 初始化获取时间
getRestTime () {
// 赋值转时分秒
this.restTime = this.toHHmmss(this.timeStamp);
// 所以不是大于0秒
if (this.timeStamp>= 1000) {
// 1000为一秒
// 如果大于1秒
this.timeStamp = this.timeStamp -1000;
} else {
// 倒计时最后一秒将剩余时间修改
this.restTime= "00:00:00";
// 清除定时器
clearInterval(this.timer)
// 在这里编写考试交卷或自动取消订单的功能
console.log("结束定时器!");
}
}
},
// 获取时间差长度只需要做一次
created() {
// 处理字符串为时间类型
let startTime = Date.parse(this.startDataTime.replace(/-/g,"-"));
let endTime = Date.parse(this.endDataTime.replace(/-/g,"-"));
// 调用moment插件计算时间差(做完这一步timeStamp为时间戳了)
this.timeStamp = this.$moment(endTime).diff(this.$moment(startTime));
},
// 计算
mounted () {
// 倒计时,每一秒执行一次
if(this.timer)clearInterval(this.timer)
this.timer = setInterval(this.getRestTime,1000)
},
// 退出页面清除定时器
beforeDestroy() {
clearInterval(this.timer);
}
}
</script>
<style>
</style>
注意事项
// 调用moment插件计算时间差
const time = this.$moment(this.endTime).diff(this.$moment(new Date()));
要使用以上代码的话需要安装对应的moment插件
安装命令:
npm install moment
然后在main.js文件里引入
import moment from "moment";
moment.locale('zh-cn');
Vue.prototype.$moment = moment
重要:
经过反馈，发现以前的代码报NaN错误，检查发现，不能将时间戳获取直接把获取到的时间转掉，
否则第二秒执行会报错。
于是，我重新写了一个测试页面验证，并进行了简化，当前的代码为验证过可执行的；
因为和我正式项目的有差别，所有单纯只是计时，并没有做功能。
截图
以下截图为上面代码的验证页面
以下截图为本人项目中实际效果截图
结语
以上，为倒计时定时器逻辑代码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136694.html
