javascript - 使用 css 定期更改圆圈的背景

Question

我用 CSS 创建了 3 个圆圈。

我想每 3 秒更改每个圆圈的颜色。

3 Seconds -> 1 Circle Color goes Orange
6 Seconds -> 2 Circle Color goes Orange
9 Seconds -> 3 Circle Color goes Orange
12 Seconds -> 1,2,3 Circle Color goes White

15 Seconds -> 1 Circle Color goes Orange
18 Seconds -> 2 Circle Color goes Orange
21 Seconds -> 3 Circle Color goes Orange
24 Seconds -> 1,2,3 Circle Color goes White

这就是循环。我遇到的问题是在 12 秒时并不是所有的圆圈都变白了。我正在使用 set Interval 函数来执行此操作。

this.boton1 = function(){
  var container = document.getElementById('circle1');
  container.style.background = '#FF7700';
};  

this.boton4 = function(){
  var container = document.getElementById('circle1');
  container.style.background = '#FFFFFF';
};

setInterval(boton1,3000);
setInterval(boton4,12000);

我猜我在设置间隔时管理错误。我有一个 DEMO HERE显示结果。

提前致谢

更新

以防有人需要解决方案。这是 DEMO update

Answer 1

问题在于您正在使用 setInterval。这意味着每 3 秒圆圈变为橙色。但是 12%3=0。没有人知道第一个 setInterval(..,12000) 或 setInterval(..,3000) 会发生什么。将 12000 更改为 12500 或者，恕我直言，使用 setTimeout(sample,3000)像这样的样本

function sample(){
  counter++;
  if (counter % 4 ==0){
    //circles go white
  } else {
    //circles go orange
  }
  setTimeout(sample,3000);
}