JS实现活动秒杀倒计时动态展示效果-小月博客

JS实现活动秒杀倒计时效果

相信很多项目中都会设计到一些促销秒杀活动的功能，那么就会有活动倒计时这样的需求。最近我们的项目又需要这个功能了，年底无心上班了，就在写一下文章吧，免得自己年纪大了哪天忘了怎么写了。

一起来看效果图：【动态展示】

JS实现倒计时效果代码：

vue中实现的，下面的代码

data: {
    setDate:"2021-03-10 12:00:00",
    remaining:" 0 天 0 时 0 分"
},
created() {
    setInterval(() => {
        this.countDown()
    },1000)
},

JS 方法

countDown() {
    var nowTime = Date.now(); //当前时间
    var setDate = new Date(this.setDate);
    var setTime = setDate.getTime(); //设定的时间

    //获取剩余时间总秒数
    var getTimes = (setTime - nowTime) / 1000;

    //获取天数
    var d = parseInt(getTimes / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;

    //获取小时
    var h = parseInt(getTimes / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;

    //获取分钟
    var m = parseInt(getTimes / 60 % 60);
    m = m < 10 ? '0' + m : m;
    //获取秒数
    var s = parseInt(getTimes % 60);
    s = s < 10 ? '0' + s : s;
    this.remaining = d + " 天 " + h + " 时 " + m + " 分 " + s + " 秒"
    return this.remaining;
}

根据自己的项目去可以按需求改倒计时方法。

小月博客致力于技术分享