今日分享，下课倒计时案例JS部分的步骤为：一，先获取结束时间，再获取当前时间，然后相减得出倒计时时间二，判断三个数值


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .countdown {
            width: 240px;
            height: 305px;
            text-align: center;
            line-height: 1;
            color: #fff;
            background-color: brown;
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden;
        }

        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px;
        }

        .countdown .title {
            font-size: 33px;
        }

        .countdown .tips {
            margin-top: 40px;
            font-size: 23px;
        }

        .countdown small {
            font-size: 17px;
        }

        .countdown .clock {
            width: 142px;
            margin: 18px auto 0;
            overflow: hidden;
        }

        .countdown .clock span,
        .countdown .clock i {
            display: block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            float: left;
        }

        .countdown .clock span {
            width: 34px;
            height: 34px;
            border-radius: 2px;
            background-color: #303430;
        }

        .countdown .clock i {
            width: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="countdown">
        <p class="next">今天是2022年1月20日</p>
        <p class="title">下班倒计时 <input type="datetime-local" id="des" /></p>
        <p class="clock">
            <span id="hour">00</span>
            <i>:</i>
            <span id="minutes">00</span>
            <i>:</i>
            <span id="scond">00</span>
        </p>
        <p class="tips">
            放学时间是18:30:00
        </p>
    </div>
    <script>
        //获取对应元素
        let eleHour = document.querySelector('#hour')
        let eleMinutes = document.querySelector('#minutes')
        let eleScond = document.querySelector('#scond')

        //设置定时器
        let timeId = setInterval(function () {
            //取下课时间
            let date = new Date('2022-1-20 18:30:00')
            //取当前时间
            let now = Date.now()
            //用下课时间减去当前时间
            let offset = parseInt((date.getTime() - now) / 1000)
            //判断时间是否结束，结束后停止
            if (offset === 0) {
                clearInterval(timeId)
            }
            //判断数值是否小于10，如小于就在前面加0
            let hour = parseInt(offset / 60 / 60)
            hour = hour < 10 ? '0' + hour : hour
            let minute = parseInt(offset % 3600 / 60)
            minute = minute < 10 ? '0' + minute : minute
            let second = offset % 60
            second = second < 10 ? '0' + second : second
            //赋值渲染
            eleHour.innerText = hour
            eleMinutes.innerText = minute
            eleScond.innerText = second
            //设置定时器时间，1k毫秒判断一次
        }, 1000)
    </script>
</body>

</html>

JS部分的步骤为：一，先获取结束时间，再获取当前时间，然后相减得出倒计时时间二，判断三个数值是否小于10，如小于就在前面加0（美观一些）三，添加定时器，设置时间为1K毫秒（1秒）更新一下数据四，在定时器里添加判断时间是否结束，如结束就停止五，在开头获取要显示的元素，在结束的地方赋值渲染。