如何在HTML中实现每日自动加1的数字，支持正向计数与反向倒计时

核心实现逻辑 #

完全基于前端原生JS实现，无需后端接口支持，所有数值通过日期差实时计算，每日自动更新：

• 正向计数模式：计算当前日期与起始日期的天数差，加上自定义初始数值后展示
• 反向倒计时模式：计算目标日期与当前日期的天数差，差值小于0时展示自定义到期提示

可配置参数 #

你可以直接修改配置项调整功能：

• mode：计数模式，可选值positive（正向递增）/countdown（反向倒计时）
• startDate：正向计数的起始日期，格式要求为YYYY-MM-DD
• startNum：正向计数的初始数值，比如你接入功能时已经安全运行了100天，就填100，默认值为0
• targetDate：倒计时模式的目标日期，格式要求为YYYY-MM-DD
• expireText：倒计时到期后展示的文案，默认值为已到期

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天数计数演示</title>
</head>
<body>
    <!-- 展示容器，可自行修改文案样式 -->
    <div>本站已无安全事故运行 <span id="days-num">0</span> 天</div>

    <script>
        // 配置项，直接修改这里即可调整功能
        const config = {
            mode: 'positive', // 可选 positive / countdown
            startDate: '2023-01-01', // 正向模式起始日期
            startNum: 0, // 正向模式初始数值
            targetDate: '2024-12-31', // 倒计时模式目标日期
            expireText: '已到期' // 倒计时到期后展示文案
        }

        // 计算天数差的核心方法
        function calcDayDiff(date1, date2) {
            const time1 = new Date(date1).setHours(0,0,0,0);
            const time2 = new Date(date2).setHours(0,0,0,0);
            const diffTime = time2 - time1;
            return Math.floor(diffTime / (1000 * 60 * 60 * 24));
        }

        // 页面加载时执行计算
        window.onload = function() {
            const now = new Date();
            let showNum = 0;
            if(config.mode === 'positive') {
                const diff = calcDayDiff(config.startDate, now);
                showNum = diff + config.startNum;
                document.getElementById('days-num').innerText = showNum;
            } else {
                const diff = calcDayDiff(now, config.targetDate);
                if(diff < 0) {
                    document.getElementById('days-num').innerText = config.expireText;
                } else {
                    document.getElementById('days-num').innerText = diff;
                }
            }
        }
    </script>
</body>
</html>

使用说明 #

• 只需要修改代码开头的config配置项即可满足自定义需求，不用修改其他逻辑
• 数值基于日期实时计算，不需要每日手动更新，用户打开页面自动获取最新值
• 如果你需要把计数固定展示在网站页脚，把对应HTML和JS片段嵌入到你的页脚模板中即可
• 若需要多端统一展示数值、避免本地时间误差，可将config配置项存储到你的后端接口，页面加载时先拉取配置再执行计算即可

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