js实现同一页面多个倒计时

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>计时</title>
 <style>
     .mytime{ line-height: 40px; width: 500px; margin: 0 auto;display: block;}
 </style>
 </head>
 <body>
 <div>
    <div class="mytime jsTime" data-time="2060-03-31 23:59:59">时间1</div>
    <div class="mytime jsTime" data-time="2030-03-20 23:59:59">时间2</div>
    <div class="mytime jsTime" data-time="2030-03-15 23:59:59">时间3</div>
    <div class="mytime jsTime" data-time="2030-03-31 23:59:59">时间4</div>
    <div class="mytime jsTime" data-time="2030-03-31 23:59:59">时间5</div>
 </div>
<script>
    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);
                dom.innerHTML = '距离['+dom.getAttribute('data-time') + `]剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
            } else {
                clearInterval(dom.$timer);
                dom.innerHTML = '拼团已结束';
            }
        },
        start(){
            this.domList.forEach((dom) => {
                this.setTime(dom);
                dom.$timer = setInterval(() => {
                    this.setTime(dom);
                }, 1e3);
            });
        },
    };
    countdown.start();
</script>
</body>
</html>
倒计时的开始时间可以很方便的从后台接收
js实现同一页面多个倒计时

猜你喜欢
