如何用JavaScript实现页面重载时循环切换显示3个div

调整后完整代码 #

// 读取访问计数，首次访问时默认赋值为0
let visitCount = Number(localStorage.getItem('visits')) || 0;
// 计数自增
visitCount++;
// 存储更新后的计数
localStorage.setItem('visits', visitCount);

// 按模3结果判断要显示的div
switch (visitCount % 3) {
  case 1:
    document.getElementById('1').style.display = 'block';
    break;
  case 2:
    document.getElementById('2').style.display = 'block';
    break;
  case 0:
    document.getElementById('3').style.display = 'block';
    break;
}

核心修改逻辑说明 #

• 新增了计数类型转换和初始值处理：localStorage.getItem返回的是字符串类型，首次访问时取值为null，通过Number()转换配合|| 0可以保证计数始终为合法数字，避免出现字符串拼接或NaN的问题
• 将原来的模2判断改为模3：3个元素循环只需要对3取余，余1对应第一次加载显示div1，余2对应第二次显示div2，余0对应第三次显示div3，后续加载时会自动从1开始重新循环

如果你更习惯用if判断，也可以替换成以下写法：

const mod = visitCount % 3;
if (mod === 1) {
  document.getElementById('1').style.display = 'block';
} else if (mod === 2) {
  document.getElementById('2').style.display = 'block';
} else {
  document.getElementById('3').style.display = 'block';
}

注意：请确保你页面中的三个div的id分别为1、2、3，如果id有自定义修改，同步调整代码中getElementById的传入参数即可。

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