JS,vue写一个动态的倒计时

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Red_sevenWord/article/details/100151114

• 常有的什么秒杀啊，活动截止时间之类的能用上。
• 不爱打字了，开始上代码

先写结构，在data中定义个timehtml用于显示时间

<div class="time">活动剩余时间：{{this.timehtml}}</div>

然后在进入页面实列创建完成就执行倒计时函数

created () {
    this.overtime = '2019-9-1 14:00:50'
    this.inittime()
}

然后是methods里的函数

inittime () {
            var timer = setInterval(() => {
                var offset = Math.floor((Date.parse(this.overtime) - Date.now())/1000);
                if(offset<=0){
                    clearInterval(timer);
                }
                var secLeft = offset%60;
                var minLeft = Math.floor(offset/60)%60;
                var hourLeft = Math.floor(offset/60/60)%24;
                var day = Math.floor(offset/60/60/24);

                // 补0操作
                secLeft = (secLeft<10 ? '0' : '') + secLeft;
                minLeft = (minLeft<10 ? '0' : '') + minLeft;
                hourLeft = (hourLeft<10 ? '0' : '') + hourLeft;

                // 4）拼接时间格式，写入timehtml
                this.timehtml = day + '天' + hourLeft + '时' + minLeft + '分' + secLeft + '秒';
            }, 1000)
        }

效果图如下