javascript - 如何使用Javascript使文本颜色自动来回变化？

Question

<div>
<h2 id="change"> Hello Family</h2>
</div>

<script type="text/javascript">
setTimeout("firstColor()", 3000)
function firstColor(){
document.getElementById('change').style.color="#ffffff";
secondColor();
}

function secondColor(){
document.getElementById('change').style.color="#33ccff";
}
</script>

此代码仅更改一次颜色。我希望这两种颜色来回改变。当我secondColor从firstColor函数调用函数时，它不会执行。我知道到目前为止我所拥有的不是循环，但我对secondColor()不会执行的事实感到困惑。我需要帮助理解为什么secondColor函数没有执行以及如何循环它。

Answer 1

通过调用secondColor()第一种方法，您可以在屏幕有机会呈现第一种颜色之前设置第二种颜色。您必须在两者之间留出超时时间。

所以，我会推荐一种更像这样的通用方法：

var myToggle = false;

setTimeout(function() {

   if (myToggle) {
       document.getElementById('change').style.color="#ffffff"
   }
   else {
       document.getElementById('change').style.color="#33ccff";
   }

   myToggle = !myToggle;

}, 3000)