本文详解如何使用原生 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免费学习笔记（深入）”；
