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)

如何使用Javascript自动来回更改文本颜色？

1 个答案: