Question

我是编码的新手，如何将颜色更改为“ bg-circle”。

我希望var“颜色”中的颜色通过“圆”。我已经尝试过，但逻辑不正确。

JavaScript

var colors = ["blue", "red", "blue"]

HTML：

<div class="bg-circle">
    <div class="sm-circle"> 

    </div>          
</div>

CSS：

bg-circle{
width:40px;
height:40px;
border-radius:50%;
background:#ff7675;
}

Answer 1

var colors = ["blue", "red", "blue"];
let i = 0;
let x = document.getElementsByClassName("bg-circle")[0];
setInterval((color) => {
  x.style.background = colors[i];
  i++;
}, 1000);

.bg-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff7675;
}

<div class="bg-circle">
  <div class="sm-circle">
  </div>
</div>

Answer 2

您可以使用JavaScript来实现。

var colors = ["blue", "red", "blue"];
for(var i = 0; i < colors.length; i++) {
    document.getElementsByClassName('bg-circle')[0].style.backgroundColor = colors[i];
}

Answer 3

您可以使用setInterval简单地执行此操作，然后循环抛出这些颜色。

var colors = ["blue", "red", "green"]

var smCircule = document.querySelector(".bg-circle");
var index=0;
setInterval(()=> {
smCircule.style.background = colors[index];
index++;
if (index>=colors.length)
    index=0;

},1000)

.bg-circle{
width:40px;
height:40px;
border-radius:50%;
background:#ff7675;
}

<div class="bg-circle">
    <div class="sm-circle"> 
    </div>          
</div>

Answer 4

也许这就是您要实现的目标：

const colors = ["blue", "red", "green"]
let currentColorIndex = 0;
//change color each second
setInterval(changeColor, 1000);

function changeColor() {
  document.querySelector('.bg-circle').style.backgroundColor = colors[currentColorIndex];
  currentColorIndex++;
  if(currentColorIndex == colors.length) {
    currentColorIndex = 0;
  }
}

.bg-circle{
width:40px;
height:40px;
border-radius:50%;
background:#ff7675;
}

<div class="bg-circle">
    <div class="sm-circle">
    </div>          
</div>

如果是这种情况，这里有一个解释：

使用setInterval方法，该方法每隔XXXX毫秒执行一次函数，其中XXXX被设置为参数。进一步了解here;

通过保持当前活动索引为全局，循环遍历colors数组，并在超过颜色元素大小时将其重置。这样就可以旋转其元素。

当您每秒获得正确的颜色（在我的情况下，我将间隔设置为每秒）时，您必须选择圆div。您可以使用querySelector完成此操作，该返回一个元素并直接设置其背景颜色属性。

我已经解决了CSS类样式的问题。您会在CSS代码中错过类名前面的点。

Answer 5

我在这里告诉您：“您可以在CSS中做到这一点。”

.bg-circle{
    animation-name:toRed;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    background-color:blue;
    border-radius:25px;
    width:50px;
    height:50px;
}

@keyframes toRed{
    from{
      background-color:blue;
    }
    to{
        background-color:red;
    }
}

<div class="bg-circle"></div>

如果这是您想要的颜色之间的平滑变化。您还可以通过将关键帧的“从”更改为0％，35％来使用多种颜色。 75％，100％。祝你有美好的一天。

如何在“圆圈”内循环显示颜色？

5 个答案: