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

Change the background of a circle periodically with css

本文关键字：背景 css 使用      更新时间：2023-09-26

我用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 秒时，并非所有圆圈都变白。我正在使用设置间隔函数来执行此操作。

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

猜我用设定的间隔管理错误。我这里有一个演示显示结果。

提前致谢

更新

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

问题是你正在使用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);
}
相关文章：