如何在HTML中添加显示到次日倒计时的计时器？

要实现距离次日0点解锁新单词的动态计时器，核心是自动计算次日零点的时间，而非依赖固定日期。以下是具体实现步骤：

1. 添加计时器显示容器 #

在HTML的<hr>下方插入用于展示倒计时的元素：

<div id="countdown" style="text-align: center; font-size: x-large; margin: 20px 0;"></div>

2. 编写动态倒计时逻辑 #

在<body>末尾加入JavaScript代码，实时计算并更新剩余时间：

function updateCountdown() {
    // 获取当前时间
    const now = new Date();
    // 计算次日0点的时间：当前日期+1天，时分秒毫秒清零
    const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0);
    
    // 计算时间差（毫秒）
    const diff = tomorrow - now;
    
    // 转换为小时、分钟、秒
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    // 格式化数字，确保两位数显示
    const formatNum = num => num.toString().padStart(2, '0');
    
    // 更新页面显示内容
    document.getElementById('countdown').textContent = 
        `距离新单词解锁还有：${formatNum(hours)}:${formatNum(minutes)}:${formatNum(seconds)}`;
}

// 初始化显示
updateCountdown();
// 每秒刷新一次计时器
setInterval(updateCountdown, 1000);

3. 整合后的完整代码 #

把上述内容嵌入你的原有代码中，最终版本如下：

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="images/tabIcon.ico">
<title>Daily WordGame</title>
<style>
    h1 {
        font-family: Tahoma, sans-serif;
        text-align: center;
    }
    
    p {
        font-size: large;
        text-align: center;
    }
</style>
</head>
<body>

<h1>Welcome to your daily source of educational fun</h1>
<hr> 
<div id="countdown" style="text-align: center; font-size: x-large; margin: 20px 0;"></div>
<p style="font-size: large;">Everyday you have a chance of guessing a different word. 
</p>

<a href="about.html">Go to about</a>
<p>this is a second text</p>
<ul>
    <li>Boats</li>
    <li>Cars</li>
        <ul>
            <li>Buggati</li>
            <table>
                <tr>
                    <td>Price</td>
                    <td>Top speed</td>
                    <td>0-100</td>
                    <td>Horse Power</td>
                </tr>
                <tr>
                    <td>3.300.000$</td>
                    <td>420km/h</td>
                    <td>2.2s</td>
                    <td>1480</td>
                </tr>
            </table>
            <img src="images/car.jpg" style="width: 500px;height:300px;">
        </ul>
    <li>Trucks</li>
</ul>

<script>
function updateCountdown() {
    const now = new Date();
    const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0);
    const diff = tomorrow - now;
    
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    const formatNum = num => num.toString().padStart(2, '0');
    
    document.getElementById('countdown').textContent = 
        `距离新单词解锁还有：${formatNum(hours)}:${formatNum(minutes)}:${formatNum(seconds)}`;
}

updateCountdown();
setInterval(updateCountdown, 1000);
</script>
</body>
</html>

核心说明 #

• 无需手动设置固定日期，代码会自动计算次日零点，每天自动重置倒计时
• padStart(2, '0')确保时分秒以两位数格式显示（如08而非8）
• setInterval每秒刷新一次计时器，保证时间实时更新

内容的提问来源于stack exchange，提问作者Yanislav Yanakiev