html js秒杀倒计时,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;

}

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

小月博客致力于技术分享