1

我有 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);

我猜我用设置的间隔管理错了。我在这里有一个演示结果。

提前致谢

更新

万一有人需要解决方案。这是演示更新

4

1 回答 1

1

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

function sample(){
  counter++;
  if (counter % 4 ==0){
    //circles go white
  } else {
    //circles go orange
  }
  setTimeout(sample,3000);
}
于 2013-10-24T18:09:58.740 回答