一个可以显示中考高考倒计时的HTML版电子计时器可显示在手机或者电脑联网设备上，总比花几百买一个强吧?

本文链接：https://blog.csdn.net/weixin_45346353/article/details/134163800

家里有孩子，让孩子有紧迫感，一个显示倒计时的电子计时器有必要，查了下网上最低卖400 现在0元实现！并且精确到了毫秒实现方法：
把下面代码粘贴到HTML文档里即可，根据自己需求适当修改文字和倒计时时间截止期，然后放到服务器或者可以访问的地方，打开手机浏览器设置为主页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <style>
        body {
            text-align: center;
            color: #ffffff;
            font-weight: bold;
            font-size: 40px;
        }

        #countdown {
            display: inline-block;
            padding: 10px;
            background-color: #000000;
            border-radius: 10px;
            text-align: center;
        }

        #countdown-text {
            display: block;
        }

        #time-wrapper {
            display: inline-block;
        }

        .countdown-unit {
            margin: 0 5px;
            color: red;
        }

        #seconds-wrapper {
            display: inline-block;
            width: 80px; /* 固定秒部分的宽度 */
        }
    </style>
</head>
<body>
    <div id="countdown">
        <span id="countdown-text">X距2024年中考</span>
        <div id="time-wrapper">
            <span id="days" class="countdown-unit">xx</span> 天 <span id="hours" class="countdown-unit">xx</span> 时 <span id="minutes" class="countdown-unit">xx</span> 分
            <span id="seconds" class="countdown-unit">xx</span> 秒
            <div id="seconds-wrapper">  <span id="milliseconds" class="countdown-unit">xx</span></div>
        </div>
    </div>

    <script>
        var targetDate = new Date("2024-06-12T00:00:00").getTime();

        var countdown = setInterval(function() {
            var currentDate = new Date().getTime();
            var timeLeft = targetDate - currentDate;

            if (timeLeft <= 0) {
                clearInterval(countdown);
                document.getElementById("countdown").innerHTML = "中考已经开始！";
            } else {
                var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
                var milliseconds = Math.floor(timeLeft % 1000);

                document.getElementById("days").innerHTML = days;
                document.getElementById("hours").innerHTML = hours;
                document.getElementById("minutes").innerHTML = minutes;
                document.getElementById("seconds").innerHTML = seconds;
                document.getElementById("milliseconds").innerHTML = milliseconds;
            }
        }, 1);
    </script>
</body>
</html>

显示效果如图：
在这里插入图片描述