第一次更改颜色后，用于轮廓颜色闪烁的 JavaScript setInterval 不起作用

Question

我试图每 2 秒更改一次 H1 元素的轮廓颜色。所以我使用了这段 JavaScript 代码……但它只从黄色变为橙色一次，并且一直保持橙色。我该怎么做才能让它在两种颜色之间闪烁？请用 JS 术语而不是 JQuery 库来回答

这是我的 JavaScript 代码，我是 JS 新手:

var myVar = setInterval(function(){ colorFlicker() }, 2000);

function colorFlicker(){
    var y = document.getElementById("mainH1");
    y.style.outlineColor = y.style.outlineColor == "#ff944d" ? "#d9ff66": "#ff944d";
  }

Answer 1

不要在 javascript 中检查颜色，返回的颜色取决于浏览器，格式通常为 rgb(200,33,33) 或 rgba(244,22,244 ,1) 甚至在旧版浏览器中使用十六进制，改用标志

var myVar = setInterval(colorFlicker, 500);

var flag = true;

function colorFlicker() {
    var y = document.getElementById("mainH1");
    y.style.outlineColor = flag ? "#d9ff66" : "#ff944d";
    flag = !flag;
}

#mainH1 {outline: 2px solid #ff944d;}

<h1 id="mainH1">TEST</h1>