第一次更改颜色后，轮廓颜色闪烁的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> 

Answer 2

使用rgb()作为默认颜色，然后调整您的条件：

 var myVar = setInterval(colorFlicker, 1000); function colorFlicker() { var y = document.getElementById("mainH1"); y.style.outlineColor = y.style.outlineColor == "rgb(255, 148, 77)"?"#d9ff66":"rgb(255, 148, 77)"; } 

 h1 { outline-style: dotted; outline-color: rgb(255, 148, 77); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id='mainH1'>mainH1</h1> 

Answer 3

样式更改应使用CSS处理。 然后，您可以使用JavaScript安全地切换将CSS样式附加到元素的类：

/* css */
#mainH1 { outline: /* some color */ }
#mainH1.alternateColor { outline: /* some other color */ }

// JS
var y = document.getElementById("mainH1");
function colorFlicker(){
  y.classList.toggle('alternateColor');
}