vue实现倒计时定时器

前言

本文章将发布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错误，检查发现，不能将时间戳获取直接把获取到的时间转掉，
否则第二秒执行会报错。
于是，我重新写了一个测试页面验证，并进行了简化，当前的代码为验证过可执行的；
因为和我正式项目的有差别，所有单纯只是计时，并没有做功能。

截图

以下截图为上面代码的验证页面

以下截图为本人项目中实际效果截图

结语

以上，为倒计时定时器逻辑代码