您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

vue实现时间倒计时功能

51自学网 2022-05-02 21:35:03
  javascript

本文实例为大家分享了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); }

更多关于倒计时的文章请查看专题:《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


react-beautiful-dnd 实现组件拖拽功能
vue3不同语法格式对比的实例代码
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1