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;
}

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

 

小月博客致力于技术分享

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏