前言

本文章将发布vue实现倒计时定时器，可用于考试系统自动交卷、商城未付款倒计时取消订单等效果

同时，如不清楚vue时间处理，可查看我上一个文章
vue时间处理

倒计时定时器

为了制作倒计时定时器，还需要将时分秒转时间戳
注意：一般倒计时皆为HH:mm:ss 时分秒形式，本方法不适用于年月日 时分秒的形式，如需要，则需要根据我本篇文章进行改造。处理时间的代码

以下为制造倒计时效果代码

// 界面
<template>
	<div>
	// 剩余时间显示在界面
	{{resTime}}
	</div>
</template>
// 逻辑
<Script>
export default {
	name: "xxx",
	// 定义属性
	data () {
		return  {
			resTime: "", // 剩余时间
			startTime: "2022-3-7 12:00:00", // 开始时间，自己设置或数据库获取
			endTime: "2022-3-8 08:00:00" // 结束时间，自己设置或数据库获取
		}
	},
	// 功能代码
	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.startTime = new Date(Date.parse(this.startTime.replace(/-/g,"/")));
            this.endTime = new Date(Date.parse(this.endTime.replace(/-/g,"/")));
            // 调用moment插件计算时间差
            const time = this.$moment(this.endTime).diff(this.$moment(new Date()));
           // 赋值转时分秒
            this.restTime = this.toHHmmss(time);
           // 转时间戳，不能直接给界面显示的属性转，不然显示会有问题
           let timeStamp = this.restTime; // timeStamp字符串类型
           // 调用
           timeStamp = this.toTimeStamp(timeStamp);
           // 判断时间戳是否大于等于1秒，大于1秒的原因在于如果要显示在界面会有异常
           // 所以不是大于0秒
           if (timeStamp>= 1000) {
           		// 1000为一秒
           		// 如果大于1秒
                 timeStamp = time -1000;
                } else {
                // 倒计时最后一秒将剩余时间修改
                this.restTime= "00:00:00";
                // 清除定时器
                clearInterval(this.timer)
				// 在这里编写考试交卷或自动取消订单的功能
				xxx功能
			}
		}
	},
	// 页面加载的时候调用执行剩余时间的方法
	created () {
	this.getRestTime()
	},
	// 计算
	mounted () {
	// 倒计时,每一秒执行一次
    this.timer = setInterval(this.getRestTime,1000)
	}
}
</Script>

结语

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