如何在HTML中实现从指定日期计算的实时流逝时间计数器？

你不需要单独编写JS文件，所有代码可以整合到同一个HTML中，直接复制下方代码即可使用。

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>累计时间计数器</title>
    <style>
        /* 可以自行修改样式调整显示效果 */
        .time-counter {
            font-size: 2em;
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <div class="time-counter">
        <div>从2001年1月1日至今已经过去：</div>
        <div id="timeDisplay"></div>
    </div>

    <script>
        // 在这里修改你的起始时间，格式为 年-月-日 时:分:秒
        const startDate = new Date('2001-01-01 00:00:00');
        
        function updateCounter() {
            const now = new Date();
            let years = now.getFullYear() - startDate.getFullYear();
            let months = now.getMonth() - startDate.getMonth();
            let days = now.getDate() - startDate.getDate();
            let hours = now.getHours() - startDate.getHours();
            let minutes = now.getMinutes() - startDate.getMinutes();
            let seconds = now.getSeconds() - startDate.getSeconds();

            // 处理时间单位溢出的负数情况
            if (seconds < 0) {
                minutes--;
                seconds += 60;
            }
            if (minutes < 0) {
                hours--;
                minutes += 60;
            }
            if (hours < 0) {
                days--;
                hours += 24;
            }
            if (days < 0) {
                months--;
                const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
                days += lastMonth.getDate();
            }
            if (months < 0) {
                years--;
                months += 12;
            }

            // 换算总已过去月数
            const totalMonths = years * 12 + months;

            document.getElementById('timeDisplay').innerHTML = `
                ${totalMonths} 个月 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒
            `;
        }

        // 页面加载时立即显示一次时间
        updateCounter();
        // 每1秒更新一次计数，实现实时跳动效果
        setInterval(updateCounter, 1000);
    </script>
</body>
</html>

使用说明 #

• 把上述代码复制后，保存为后缀为.html的文件，直接双击用浏览器打开即可生效
• 如果需要修改起始时间，只需修改代码中const startDate = new Date('2001-01-01 00:00:00');这一行引号内的时间值即可，格式保持年-月-日 时:分:秒即可
• 页面打开后会自动每秒刷新时间，无需额外操作

实现逻辑（可选了解） #

• 首先通过JS内置Date对象分别获取起始时间和当前时间的时间值，计算两者差值
• 对时间差值按单位换算，同时处理单位溢出的负数情况，保证计数符合自然月、自然天的实际规则
• 通过setInterval定时器每1000毫秒重新计算一次时间差，更新页面显示内容，实现实时跳动的效果

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