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

我猜我用设置的Interval管理错了。我有DEMO HERE显示结果。

提前致谢

更新

如果有人需要解决方案。这是DEMO update

Answer 1

麻烦的是你正在使用setInterval。这意味着每3秒钟圈出橙色。但是12％3 = 0。没有人知道第一个setInterval（..，12000）或setInterval（..，3000）会起什么作用。将12000更改为12500或imho，使用setTimeout（sample，3000）这样的样本

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

定期用css更改圆圈的背景

1 个答案: