使用CSS定期更改圓圈的背景

Question

我有3個用CSS創建的圈子。

我想每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);

我猜我在設置時間間隔上解決了這個問題。 我有一個演示這里顯示結果。

提前致謝

更新

萬一有人需要解決方案。 這是演示更新

Answer 1

問題是您正在使用setInterval。 這意味着每3秒圓圈變成橙色。 但是12％3 = 0。 而且沒人知道第一個setInterval（..，12000）或setInterval（..，3000）會做什么。 將12000更改為12500，或者，恕我直言，使用setTimeout（sample，3000），其中sample這樣

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