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アップデートはこちら