vue实现倒计时定时器

生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

导读:本篇文章讲解 vue实现倒计时定时器,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

前言

本文章将发布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

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!