vue怎么实现时间倒计时功能

本篇内容介绍了“vue怎么实现时间倒计时功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

需求：

做一个剩余支付时间倒计时的效果

效果图：

代码：

<template> <div>剩余支付时间：{{count}}</div></template><script>export default {    data() {        return {            count: '', //倒计时            seconds: 864000 // 10天的秒数        }    },    mounted() {        this.Time() //调用定时器    },    methods: {        // 天 时 分 秒 格式化函数        countDown() {            let d = parseInt(this.seconds / (24 * 60 * 60))            d = d < 10 ? "0" + d : d            let h = parseInt(this.seconds / (60 * 60) % 24);            h = h < 10 ? "0" + h : h            let m = parseInt(this.seconds / 60 % 60);            m = m < 10 ? "0" + m : m            let s = parseInt(this.seconds % 60);            s = s < 10 ? "0" + s : s            this.count = d + '天' + h + '时' + m + '分' + s + '秒'        },        //定时器没过1秒参数减1        Time() {            setInterval(() => {                this.seconds -= 1                this.countDown()            }, 1000)        },    }}</script>

时间的秒数可以根据自己的需求进行修改

再为大家分享一段代码：vue时分秒倒计时

countTime: function () {        //获取当前时间        var date = new Date();        var now = date.getTime();        //设置截止时间        var endDate = new Date("2018-10-22 23:23:23");        var end = endDate.getTime();        //时间差        var leftTime = end - now;        //定义变量 d,h,m,s保存倒计时的时间        if (leftTime >= 0) {                    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);                    this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);                    this.m = Math.floor(leftTime / 1000 / 60 % 60);                    this.s = Math.floor(leftTime / 1000 % 60);         }          console.log(this.s);          //递归每秒调用countTime方法，显示动态时间效果            setTimeout(this.countTime, 1000); }

“vue怎么实现时间倒计时功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！