vue倒计时功能

最新推荐文章于 2022-03-19 21:31:34 发布

WGT_Kris

最新推荐文章于 2022-03-19 21:31:34 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

文章标签： vue 倒计时

本文链接：https://blog.csdn.net/WGTkris/article/details/103903202

timeFormat (param) {
    return param < 10 ? '0' + param : param
},

Countdown (it) {
    var interval = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime()

        // 对结束时间进行处理渲染到页面 this.endTime就是定义的结束时间
        let lastTime = new Date(it).getTime()
    
        // 如果活动未结束，对时间进行处理
        if (lastTime - newTime > 0) {
            let time = (lastTime - newTime) / 1000
            // 获取天、时、分、秒
            let day = parseInt(time / (60 * 60 * 24))
            let hou = parseInt(time % (60 * 60 * 24) / 3600)
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60)

            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min)
            sec: this.timeFormat(sec)
        } else { 
            // 活动已结束，全部设置为'00'
            day: '00',
            hou: '00',
            min: '00',
            sec: '00'
        }
        clearInterval(interval)
    }
        this.day = obj.day
        this.hou = obj.hou
        this.min = obj.min
        this.sec = obj.sec
    }, 1000)
},

调用该方法，并传入结束时间