以前弄过单个倒计时的相比与这个其实实现差不多。这次模仿类似拼多多的,页面上展示多个倒计时,而且不冲突。可以使用在多方面,如秒杀,拼团,活动列表倒计时等。
html:
<p class="time jstime" data-time="2021-11-02 13:00:22">剩余 00:00:00</p>
<p class="time jstime" data-time="2021-11-02 13:00:22">剩余 00:00:00</p>
javascript:
// 倒计时-start
const countdown = {
domList : document.querySelectorAll('.jstime'),
formatNumber(n){
// return n.toString().padStart(2, '0'); // 用padStart方法要注意兼容问题
n = n.toString();
return n[1] ? n : '0' + n;
},
setTime(dom){
//获取设置的时间 如:2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
if (leftTime >= 0) {
const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
const m = Math.floor(leftTime / 1000 / 60 % 60);
const s = Math.floor(leftTime / 1000 % 60);
var e_h = h < 10 ? '0' + h : h;
var e_m = m < 10 ? '0' + m : m;
var e_s = s < 10 ? '0' + s : s;
dom.innerHTML = e_h + '时' + e_m + '分'+ e_s + '秒';
} else {
clearInterval(dom.$timer);
dom.innerHTML = '拼单已结束';
}
},
start(){
this.domList.forEach((dom) => {
this.setTime(dom);
dom.$timer = setInterval(() => {
this.setTime(dom);
}, 1e3);
});
},
};
countdown.start();