【JS】京东倒计时-倒计时结束自动开启下一场

效果图

HTML

<div id="box">
        <div class="miao">京东秒杀</div>
        <div class="two"><span id="end">XXX</span>:00 点场 距结束</div><br>
        <div class="three">
            <span id="hour">02</span>
            <span>:</span>
            <span id="minute">00</span>
            <span>:</span>
            <span id="second">00</span>
        </div>
    </div>

CSS

   <style>
        * {
            margin: 0;
            padding: 0;
            font-weight: 700
        }

        #box {
            width: 190px;
            height: 260px;
            position: relative;
            margin: 100px auto;
            background: url(../images/秒杀.png);
        }

        .miao {
            color: white;
            font-size: 30px;
            width: 190px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .two {
            color: white;
            position: absolute;
            text-align: center;
            width: 190px;
            top: 160px;
            font-size: 20px;
        }

        #hour,
        #minute,
        #second {
            background-color: black;
            color: white;
            font-size: 30px;
        }

        .three {
            width: 190px;
            text-align: center;
            position: absolute;
            bottom: 20px;
        }
    </style>

JS

//获取元素
        let end = document.querySelector('#end');//放结束时间的节点
        let hour = document.querySelector('#hour');//放倒计时的小时的节点
        let minute = document.querySelector('#minute');//放倒计时的分钟的节点
        let second = document.querySelector('#second');//放倒计时的秒数的节点
        //获取时分秒
        let th, tm, ts;

        function time() {
            let endTime = new Date();//结束时间
            let startTime = new Date();//开始时间
            let h = endTime.getHours();//获取结束时间的小时数
            //倒计时显示的结束时间，应为---》
            //如果当前的小时数为偶数小时，则说明显示的场数开始不到1个小时，直接显示当前小时数
            //如果当前的小时数为奇数小时，说明显示的场数已开始1个小时，就将当前小时数减1赋给h
            h % 2 == 0 ? h : h--;
            //将结束小时添加到页面中
            end.innerHTML = h;
            //设置结束时间
            endTime.setHours(h + 2);
            endTime.setMinutes('0');
            endTime.setSeconds('0');
            //计算时间差  转化为秒
            let diff = (endTime - startTime) / 1000;
            //如果时间差大于0
            if (diff > 0) {
                th = parseInt(diff / 60 / 60);//计算还剩多少小时
                tm = parseInt(diff / 60 % 60);//计算还剩多少小时
                ts = parseInt(diff % 60);//计算还剩多少小时
                //如果剩余的时分秒小于10，也就是说是一位数，在前面加一个‘0’
                th = th < 10 ? '0' + th : th;
                tm = tm < 10 ? '0' + tm : tm;
                ts = ts < 10 ? '0' + ts : ts;
                //将剩余的时分秒添加到页面中
                hour.innerHTML = th;
                minute.innerHTML = tm;
                second.innerHTML = ts;
            }
        }
        setInterval(time,1000);