实现每次访问按指定规则循环展示三种颜色的前端需求

先明确循环规则对应的颜色映射逻辑：

• 第1、4、7、10...次访问 → 红色
• 第2、6、8、12...次访问 → 黑色
• 第3、5、9、11...次访问 → 白色

核心通过取余运算匹配6次为一个完整循环的周期，同时处理首次访问无记录的情况，最终代码如下：

// 获取当前访问次数，无记录则初始化为1（对应第一次访问）
let attempts = Number(localStorage.getItem("attempts")) || 1;

// 根据访问次数判断要显示的颜色
let displayColor;
switch (attempts % 6) {
  case 1:
  case 4:
    displayColor = "Red";
    alert('Red');
    // 可替换为实际显示红色的逻辑，比如修改页面背景：document.body.style.backgroundColor = 'red';
    break;
  case 2:
  case 0: // 6的倍数次访问（第6、12...次）余数为0
    displayColor = "Black";
    alert('Black');
    // 可替换为实际显示黑色的逻辑：document.body.style.backgroundColor = 'black';
    break;
  case 3:
  case 5:
    displayColor = "White";
    alert('White');
    // 可替换为实际显示白色的逻辑：document.body.style.backgroundColor = 'white';
    break;
}

// 更新访问次数并存入localStorage
attempts++;
localStorage.setItem("attempts", attempts);
console.log(`下一次访问次数为: ${attempts}`);

代码说明 #

1. 初始值处理：首次访问时localStorage无attempts记录，用|| 1将初始值设为1，确保第一次访问严格对应规则里的第1次。
2. 周期匹配：通过attempts % 6获取余数，精准匹配6次循环内的颜色规则，实现无限循环效果。
3. 扩展提示：代码中注释了实际修改页面颜色的逻辑，可直接替换alert语句实现真实的视觉展示。

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