如何实现从1000开始每日递增40的JavaScript计数器？

要实现起始值1000、每24小时自动递增40的计数器，核心要解决页面刷新/关闭后数据不丢失和离线期间的递增补全问题，下面是完整实现方案：

核心实现代码 #

// 计数器配置项
const counterConfig = {
  startValue: 1000,
  step: 40,
  interval: 24 * 60 * 60 * 1000 // 24小时的毫秒数
};

// 从本地存储读取计数器数据，无数据则初始化
function getCounterState() {
  const saved = localStorage.getItem('dailyCounter');
  if (!saved) {
    return {
      value: counterConfig.startValue,
      lastUpdate: Date.now()
    };
  }
  return JSON.parse(saved);
}

// 将计数器数据保存到本地存储
function saveCounterState(state) {
  localStorage.setItem('dailyCounter', JSON.stringify(state));
}

// 更新计数器并设置下一次触发
function syncCounter() {
  const state = getCounterState();
  const now = Date.now();
  const timePassed = now - state.lastUpdate;
  
  // 计算需要递增的次数（向下取整，确保到点才递增）
  const steps = Math.floor(timePassed / counterConfig.interval);
  
  if (steps > 0) {
    state.value += steps * counterConfig.step;
    // 修正上次更新时间，避免重复计算
    state.lastUpdate = now - (timePassed % counterConfig.interval);
    saveCounterState(state);
  }
  
  // 更新页面显示
  document.getElementById('counter').textContent = state.value;
  
  // 设置下一次递增的定时器
  const timeLeft = counterConfig.interval - (timePassed % counterConfig.interval);
  setTimeout(syncCounter, timeLeft);
}

// 页面加载时启动计数器
window.onload = syncCounter;

使用说明 #

在HTML中添加用于显示计数器的元素：

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

关键细节说明 #

• 持久化存储：用localStorage保存计数器值和上次更新时间，确保页面重启后数据不会重置
• 离线补全：每次页面加载时计算离线时长，一次性补全所有应递增的次数，不会漏掉期间的增量
• 精准定时：每次同步后计算剩余时间设置定时器，避免长时间运行的误差累积

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