轮廓颜色闪烁的 JavaScript setInterval 在第一次改变颜色后不起作用答案

【问题标题】：JavaScript setInterval for outline color flicker not working after first change of color轮廓颜色闪烁的 JavaScript setInterval 在第一次改变颜色后不起作用
【发布时间】：2017-02-25 19:35:09
【问题描述】：

我正在尝试每 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";
  }

【问题讨论】：

标签： javascript css setinterval getelementbyid var

【解决方案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;}

&lt;h1 id="mainH1"&gt;TEST&lt;/h1&gt;

【讨论】：

在 colorFlicker() 函数中创建变量“y”后，您能用文字解释一下标志的作用吗？
任何人都可以告诉我如何使用标志执行 if 和 else 语句中的 adeneo 操作吗？这真的很有趣，但由于我是新手，所以我对控制流有点迷茫。
这和你的代码一样，标志从true开始，flag = !flag反转它，所以true变成false，下一次false变成@987654331 @等

【解决方案2】：

样式更改应使用 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');
}

【讨论】：

【解决方案3】：

使用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>

【讨论】：