一个页面多个倒计时JS轻松实现,类似拼多多

前端 2021-10-28

以前弄过单个倒计时的相比与这个其实实现差不多。这次模仿类似拼多多的,页面上展示多个倒计时,而且不冲突。可以使用在多方面,如秒杀,拼团,活动列表倒计时等。

1635421854(1).jpg

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();