本文详解如何使用原生 javaScript（配合 setInterval）创建实时更新的日期计数器（如“已运行 XX 天”），支持自定义起始时间、格式化显示与平滑刷新，无需第三方库。
本文详解如何使用原生 javascript（配合 `setinterval`）创建实时更新的日期计数器（如“已运行 xx 天”），支持自定义起始时间、格式化显示与平滑刷新，无需第三方库。
实现类似 uawar.net/stats 页面中醒目的紫色动态计数器（例如“已运行 1247 天”），本质是一个基于时间差的实时正向计数器（count-up timer），而非倒计时。它依赖浏览器端 javascript 持续计算当前时间与基准时间之间的毫秒差，并按需转换为天、小时、分钟等单位后渲染到页面。
核心原理非常简洁：
✅ 获取一个固定起始时间（如网站上线日）；
✅ 在页面加载后，每秒（或更短间隔）执行一次计算：当前时间 – 起始时间；
✅ 将毫秒差转换为易读格式（如 math.floor(totalMs / (1000 * 60 * 60 * 24)) 得天数）；
✅ 更新 dom 元素的文本内容，实现“闪烁”或高亮效果（CSS 控制）。
以下是一个完整、可直接运行的示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动态计数器示例</title> <style> .counter { font-family: 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: bold; color: #8a2be2; /* 紫色，呼应 uawar.net 风格 */ animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } </style> </head> <body> <div class="counter" id="dayCounter">正在计算...</div> <script> // ✅ 设置基准时间（格式：YYYY-MM-DD HH:MM:SS，建议使用 date 构造函数确保时区安全） const startTime = new Date('2022-03-15 00:00:00').getTime(); // ✅ 获取 DOM 元素 const counterEl = document.getElementById('dayCounter'); // ✅ 启动计数器：每 1000ms（1秒）更新一次 const timer = setInterval(() => { const now = Date.now(); const diffMs = now - startTime; // 转换为完整天数（向下取整） const days = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // 可选：扩展为更丰富格式（如 "X 天 Y 小时 Z 分钟"） // const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // counterEl.textContent = `${days} 天 ${hours} 小时`; counterEl.textContent = `${days} 天`; }, 1000); // ? 注意事项： // 1. 时间精度：setInterval 并非绝对精准（受事件循环影响），对“天级”计数完全足够； // 2. 时区安全：务必使用 .getTime() 获取毫秒时间戳，避免 Date 字符串解析时区歧义； // 3. 性能优化：若页面含多个计数器，建议统一管理 timer ID，避免内存泄漏； // 4. 用户体验：添加 loading 状态（如本例“正在计算...”）和 CSS 动画提升视觉反馈。 </script> </body> </html>? 进阶提示：若需更高精度（如毫秒级动画）或跨页面持久化（如用户离开后回来仍保持连续计数），可结合 performance.now() 或服务端时间戳 + 客户端差值补偿方案，但对绝大多数展示型计数器，上述 setInterval + Date.now() 组合已足够健壮、轻量且兼容性极佳。
最终效果将呈现一个每秒自动递增、带紫色高亮与轻微呼吸动画的天数计数器——简洁、专业，且完全可控。
立即学习“Java免费学习笔记（深入）”；