前言

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

截图

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

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

结语

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

vue实现倒计时定时器相关推荐

vue中通过定时器设置倒计时，5秒倒计时
前言:有时候,在项目中,我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现. 一.设置div显示倒计时数字 <div class="countCircle">& ...
Flutter开发之倒计时/定时器（30）
倒计时/定时器在移动应用开发中比较常见的功能,比如启动时的广告倒计时.比如弹框倒计时.比如定时1秒后跳转.获取验证码等等.今天就认识一下Flutter中的倒计时/定时器. 一般有两种场景: 我只需要你 ...
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
1.定时器介绍在js里面,有两种定时器:倒计时定时器和间隔定时器 (1)倒计时定时器:倒计时多长时间以后执行函数语法:setTimeout(要执行的函数,多长时间以后执行) <script ...
java 定时器倒计时_Java：多种方式实现倒计时定时器
多种方式实现倒计时定时器 github链接:https://github.com/Al-assad/Java-Gadgets/tree/master/count_down 1.简易方式实现 /** * ...
小程序抢购页面倒计时定时器
小程序抢购页面倒计时定时器 from:我是前端美少女
Android倒计时定时器CountDownTimer的用法
前一篇讲了关于Timer定时器的用法,详细请看 Android关于定时器Timer的定义及用法这一篇简单介绍一下关于倒计时定时器的用法,这涉及到一个CountDownTimer类,写了一个简单的案例 ...
Vue中使用定时器和随机数
Vue中使用定时器和随机数,程序示例如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
倒计时定时器（爆炸定时器）、间隔定时器、通过点击按钮停止定时器、异步执行问题
多个定时器返回值按照上到下排序1,2,3,4排序. 倒计时定时器(通过返回值来停止) 点击btn1按钮, <button id="btn1">清除定时器-延时< ...
vue中使用定时器setInterval
vue中使用定时器setInterval this.timer = setInterval(this.fetchData, 1000);clearInterval(this.timer);before ...

vue实现倒计时定时器

前言

倒计时定时器

注意事项

截图

结语

vue实现倒计时定时器相关推荐

最新文章

热门文章