Javascript颜色更改<div>条件

Question

所以我有这个代码块，我需要 div 的颜色在紫色和白色之间“闪烁”以用于条件“MECHANIC ON LINE”。我知道在 switch 语句之外我正在实现的代码正常工作，但在 switch 语句中我不确定。这也是在公司服务器上，我不确定后端的某些进程如何处理页面的更新。无论如何，如果有人知道我在 switch 语句中实现我的代码是否不正确，请告诉我。此外，代码的第一个 sn-p 取自下面更大的 sn-p，它是我关心的 switch 语句的一部分。最后，我还想提一下，我已经将时间间隔设置为彼此不同的整数，例如“setInterval(function, 10 * 1000), setInterval(function, 20 * 2000)”。

                    case "MECHANIC ON LINE":
                        colorTitle[i].style.color = 'rgb(127.5, 127.5, 127.5)';
                        if(colorBackground[l].style.background === 'rgb(123,31,162)') {
                            setInterval(colorBackground[l].style.background = 'rgb(255,255,255)',10 * 1000);
                        } else {
                            setInterval(colorBackground[l].style.background = 'rgb(123,31,162)',10 * 1000);
                        }
                    break;

for(var i = 0; i < colorTitle.length; i++) {
            for(var l = i; l < colorBackground.length; l++) {
                switch(colorTitle[i].textContent) {
                    case "RUNNING":
                    colorTitle[i].style.color = 'rgb(0, 255, 0)';
                    colorBackground[l].style.background = 'rgb(0, 255, 0)';
                    break;
                    case "LINE DOWN":
                    colorTitle[i].style.color = 'rgb(255, 0, 0)';
                    colorBackground[l].style.background = 'rgb(255, 0, 0)';
                    break;
                    case "OFFLINE":
                    colorTitle[i].style.color = 'rgb(127.5, 127.5, 127.5)';
                    colorBackground[l].style.background = 'rgb(127.5, 127.5, 127.5)';
                    break;
                    case "MECHANIC ON LINE":
                        colorTitle[i].style.color = 'rgb(127.5, 127.5, 127.5)';
                        if(colorBackground[l].style.background === 'rgb(123,31,162)') {
                            setInterval(colorBackground[l].style.background = 'rgb(255,255,255)',10 * 1000);
                        } else {
                            setInterval(colorBackground[l].style.background = 'rgb(123,31,162)',10 * 1000);
                        }
                    break;
                    default:
                    colorTitle[i].style.color = 'rgb(255, 255, 255)';
                    colorBackground[l].style.background = 'rgb(255, 255, 255)';
                    break;
                }
            }
        }

Answer 1

这里的问题是，在两种颜色之间进行选择的逻辑在 switch 语句内部，它只执行一次。所以你正在做的是设置间隔以保持重复设置相同的颜色。

两种颜色的切换逻辑需要在每个重复区间的回调函数内部。像这样的：

case "MECHANIC ON LINE":
  colorTitle[i].style.color = 'rgb(127.5, 127.5, 127.5)';
  colorBackground[l].style.background = 'rgb(255,255,255)';
  setInterval(function() { flicker(colorBackground[l]); }, 10 * 1000);
break;

然后你需要在某处定义函数：

function flicker(target) {
  if(target.style.background === 'rgb(123,31,162)') {
    target.style.background = 'rgb(255,255,255)';
  } else {
    target.style.background = 'rgb(123,31,162)';
  }
}

由于对象和数组是通过引用传递的，因此原始的colorBackground 将被更新，即使看起来您已经创建了一个名为target 的新对象。