在每次访问和循环中一一显示三种不同的颜色/文本

Question

if(localStorage.getItem("attempts")==1) {
//Show Red color
 alert('1')
}
if(localStorage.getItem("attempts")==2) {
//Show Black color
 alert('2')
}
if(localStorage.getItem("attempts")==3) {
//Show white color
 alert('3')
}
var attempts = Number(localStorage.getItem("attempts"));
localStorage.setItem("attempts", ++attempts);console.log(attempts);

• 我需要在圆形的不同访问中显示三种不同的颜色。 例如，第 1 次访问 - 红色，第 2 次访问 - 黑色，第 3 次访问 - 白色，第 4 次访问应该从红色开始，第 5 次访问，第 6 次黑色等。

Answer 1

也许像下面的例子？ 您将需要通过添加本地存储来调整它。

 let clicks = 0; let element = document.getElementById('color'); let btn = document.getElementById('clickbtn'); btn.addEventListener('click', () => { clicks++; switch (clicks) { case 1: element.style.color = 'red'; break; case 2: element.style.color = 'green'; break; case 3: element.style.color = 'blue'; break; } if (clicks == 3) clicks = 0; });

 <button id="clickbtn">Click</button> <p id="color">color element</p>

Answer 2

window.addEventListener('load', () => { if (!localStorage.getItem('attempts')) { localStorage.setItem('attempts', 0) } else { let fetchedAttempts = parseInt(localStorage.getItem('attempts')) fetchedAttempts++ localStorage.setItem('attempts', fetchedAttempts) } }) document.addEventListener('DOMContentLoaded', () => { let attemptsCount = parseInt(localStorage.getItem('attempts')) if (attemptsCount % 3 === 1) { document.body.style.backgroundColor = 'red' } else if (attemptsCount % 3 === 2) { document.body.style.backgroundColor = 'black' } else if (attemptsCount % 3 == 0) { document.body.style.backgroundColor = 'white' } })

Answer 3

正如我在评论中提到的，您的比较有误。 您使用单个 =（赋值）而不是 == 或 === 比较。

为了循环通过您的 colors 同时仍然计数请求，使用模运算符： %

这计算除法后的余数。 例如7 % 3计算 7 除以 3 后的余数，即 1。

这样您就可以根据您部门的 rest 进行计数并更改颜色，该分区始终为 0、1 或 2

let count = 0
window.addEventListener("load", () => {
  if (!localStorage.getItem("count")) {
    localStorage.setItem("count", count);
  } else {
    let fetchedCount = parseInt(localStorage.getItem("count"));
    fetchedCount++;
    localStorage.setItem("count", fetchedCount);
  }
});

document.addEventListener("DOMContentLoaded", () => {
  let visitingCount = parseInt(localStorage.getItem("count"));

  if (visitingCount % 3 === 1) {
    document.body.style.backgroundColor = "red";
  } else if (visitingCount % 3 === 2) {
    document.body.style.backgroundColor = "black";
  } else if (visitingCount % 3 == 0) {
    document.body.style.backgroundColor = "white";
  }
});