如何实现页面刷新不重置的定时累加计数器？

通用原生JS修改方案 #

要解决页面刷新后计数器重置的问题，核心是把计数器的关键状态（初始时间、初始数值）存在浏览器的localStorage中，每次页面加载时通过计算经过的时间还原当前应显示的数值，再继续执行累加逻辑。修改后的代码如下：

<div class="baseNum" id="baseNum"> base number = 1000</div>
<div class="resultContainer" id="resultContainer">
  after every sec + 40 = <span class="result" id="result"></span>
</div>

<script>
const resultDisplay = document.getElementById("result");
const INITIAL_NUM = 1000;
const ADD_VALUE = 40;
const INTERVAL = 24 * 3600000; // 可修改为需要的间隔时长，单位毫秒

// 从localStorage读取保存的状态
const storage = localStorage;
const storedStartTime = storage.getItem('counterStartTime');
const storedInitialNum = storage.getItem('counterInitialNum');

let currentNum;
let startTime;

if (storedStartTime && storedInitialNum) {
  // 存在历史状态，计算当前应显示的数值
  startTime = parseInt(storedStartTime);
  currentNum = parseInt(storedInitialNum);
  const elapsed = Date.now() - startTime;
  // 计算这段时间内应该累加的次数
  const addTimes = Math.floor(elapsed / INTERVAL);
  currentNum += addTimes * ADD_VALUE;
  // 更新起始时间，避免下次重复计算
  startTime += addTimes * INTERVAL;
  storage.setItem('counterStartTime', startTime.toString());
} else {
  // 首次加载，初始化状态
  startTime = Date.now();
  currentNum = INITIAL_NUM;
  storage.setItem('counterStartTime', startTime.toString());
  storage.setItem('counterInitialNum', currentNum.toString());
}

// 初始化显示
resultDisplay.innerHTML = currentNum;

function add40() {
  setTimeout(() => {
    currentNum += ADD_VALUE;
    resultDisplay.innerHTML = currentNum;
    // 更新localStorage中的状态
    startTime = Date.now();
    storage.setItem('counterStartTime', startTime.toString());
    storage.setItem('counterInitialNum', currentNum.toString());
    add40();
  }, INTERVAL);
}

add40();
</script>

代码说明 #

• localStorage用于持久化存储计数器的起始时间和对应数值，浏览器关闭后数据不会丢失
• 每次页面加载时，通过计算当前时间与存储的起始时间差，自动算出这段时间内应该累加的次数，还原正确的当前值
• 每次累加后更新localStorage的状态，保证下次加载时数据准确

WordPress+Elementor环境适配方案 #

在Elementor中可以通过以下两种方式实现：

方式1：自定义HTML模块 #

1. 打开Elementor页面编辑器，添加一个自定义HTML模块
2. 将上述完整的HTML+JS代码复制粘贴到模块的内容区域
3. 保存并更新页面即可

方式2：Elementor自定义代码功能 #

1. 进入WordPress后台，点击Elementor > 自定义代码
2. 点击添加新代码，代码类型选择JavaScript，位置选择页脚
3. 将上述代码中的<script>标签内的JS部分复制进去，然后保存
4. 在页面的Elementor编辑器中添加对应的HTML结构（两个div），确保元素ID与JS代码中的一致
5. 保存更新页面

如果担心代码冲突，也可以使用Code Snippets插件添加自定义JS代码，效果与Elementor自定义代码一致。

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