Question

我试图重复改变div的背景颜色。（即无限制地让它在两种颜色之间闪烁。）我使用setTimeout使函数在运行后再次调用，但它似乎只运行一次然后才停止。我曾尝试使用if子句和开关，但无济于事。我错过了什么？感谢您提供任何建议。

var myDiv = document.getElementById("animatebox");

function doAnimate() {

    switch (true) {
        case myDiv.style.backgroundColor = "red":
             myDiv.style.backgroundColor = "blue";
             break;
        case myDiv.style.backgroundColor = "blue":
             myDiv.style.backgroundColor = "red";
             break;
    };

    setTimeout(doAnimate, 20);

};

doAnimate();

Answer 1

您的代码每20分钟运行一次，但您没有正确使用switch。此外，如果您阅读backgroundColor属性，它可能会返回一些其他颜色表示，例如红色的'rgb（255,0,0）'。试试这个：

var myDiv = document.getElementById("animatebox");
var i = 0;    

function doAnimate() {
    if (i++ % 2)
        myDiv.style.backgroundColor = "blue";
    else
        myDiv.style.backgroundColor = "red";
  
    setTimeout(doAnimate, 20);
};
    
doAnimate();

#animatebox { width: 50px; height: 50px; background-color: red; }

<div id="animatebox">Flicker!</div>

使用递归函数重复改变颜色的div背景

1 个答案: