javascript - 使用递归函数使div的背景反复改变颜色

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>