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

家里有孩子，让孩子有紧迫感，一个显示倒计时的电子计时器有必要，查了下网上最低卖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>

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

原文链接：https://blog.csdn.net/weixin_45346353/article/details/134163800?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171949704316800185861124%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171949704316800185861124&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-23-134163800-null-null.nonecase&utm_term=2024%E9%AB%98%E8%80%83

声明📢本站内容均来自互联网，归原创作者所有，如有侵权必删除。本站文章皆由CC-4.0协议发布，如无来源则为原创，转载请注明出处。

THE END