使用JavaScript实现无需数据库的动态计数器：实现每2秒自动递增，解决仅刷新才更新的问题

看起来你已经搭好了计数器的基础框架，但它目前只能在页面加载时计算一次数值，没法动态更新。我来帮你优化它，同时修正几个容易踩的小坑，让它既能每2秒自动刷新显示，又能在页面重新加载后保持准确数值。

先聊聊原代码里的两个关键问题 #

1. 月份参数错误：JavaScript的Date对象月份是从0开始计数的（0对应1月，11对应12月），你写的new Date(2020, 12, 28)实际指向的是2021年1月28日，不是你想要的2020年12月28日。
2. 一天的毫秒数计算错误：原代码里的.001 * 60 * 60 * 1000算出来是3600（也就是1小时的毫秒数），正确的一天毫秒数应该是1000 * 60 * 60 * 24。

方案一：基于真实日期差的动态计数器（推荐） #

这个方案会始终根据初始日期和当前时间计算准确数值，即使页面开着很久或者刷新，都能保证计数和真实时间差一致，同时每2秒自动更新显示。

首先，HTML里需要一个承载计数器的元素：

<div id="counter"></div>

然后是优化后的JavaScript代码：

// 修正后的初始日期（2020年12月28日）
const initialDate = new Date(2020, 11, 28);

// 封装计算计数器值的函数，方便复用
function getCounterValue() {
  const now = Date.now();
  const timeDiff = now - initialDate;
  const msPerDay = 1000 * 60 * 60 * 24; // 一天的毫秒数
  // 计算从初始日期到现在的天数，加上你设置的初始偏移20
  return Math.floor(timeDiff / msPerDay) + 20;
}

// 更新页面上的计数器显示
function updateCounterDisplay() {
  const counterEl = document.getElementById('counter');
  if (counterEl) {
    counterEl.textContent = getCounterValue();
  }
}

// 页面加载时先显示一次初始值，避免空白
updateCounterDisplay();

// 设置定时器，每2秒自动更新一次
setInterval(updateCounterDisplay, 2000);

这个方案的优点是完全依赖时间计算，不需要额外存储，刷新后依然准确，而且不会因为页面长时间打开导致计数和真实时间脱节。

方案二：模拟每2秒递增1（依赖本地存储） #

如果你不需要严格对应真实日期差，只是想实现“每2秒加1，刷新后继续”的效果，可以用localStorage来保存当前计数，这样页面刷新或关闭重开后，会从上次的数值继续递增。

代码示例：

<div id="counter"></div>
<script>
// 计算初始值（和方案一的逻辑一致）
function calculateInitialValue() {
  const initialDate = new Date(2020, 11, 28);
  const now = Date.now();
  const timeDiff = now - initialDate;
  const msPerDay = 1000 * 60 * 60 * 24;
  return Math.floor(timeDiff / msPerDay) + 20;
}

// 从本地存储读取计数，没有的话用初始值
let currentCount = localStorage.getItem('counter') 
  ? parseInt(localStorage.getItem('counter')) 
  : calculateInitialValue();

// 更新显示和本地存储
function updateCounter() {
  currentCount++;
  document.getElementById('counter').textContent = currentCount;
  localStorage.setItem('counter', currentCount);
}

// 页面加载时先显示初始值
document.getElementById('counter').textContent = currentCount;

// 每2秒执行一次递增
setInterval(updateCounter, 2000);
</script>

注意：这个方案如果页面关闭后过了很久再打开，计数会从上次关闭的数值开始加，而不是追平真实的日期差，适合不需要严格时间关联的场景。

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