Question

我试图每秒更改一个段落的颜色。我使用以下功能：

var ChangeColorGreen = function(){ $('#contact-title p').css('color', '#5fc091'); return true; }
    var ChangeColorBlack = function(){ $('#contact-title p').css('color', '#000'); return true; }

    setTimeout(function() {
      ChangeColorGreen();
      setInterval(function() {
        ChangeColorBlack();
      }, 2000);
    }, 2000);

这是我的HTML：

<div id="contact-title">
  <p>Coming Soon</p>
</div>

但单色改变段落一次。没有颜色再次变化。

Answer 1

您可以添加2个课程black＆amp; green并使用setInterval函数和JQuery toggleClass 函数每秒在它们之间切换。

setInterval(function() {
    $('#contact-title p').toggleClass('black green')
}, 1000);

.black{
    color: #000;
}
.green{
    color: #5fc091;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contact-title">
  <p>Coming Soon</p>
</div>

希望这会有所帮助。

Answer 2

您可以设置2个间隔，每个间隔每2秒触发一次，但是将第2个间隔延迟1秒。

    setInterval(function() {
      ChangeColorGreen();
    }, 2000);

    setTimeout(function() {
      setInterval(function() {
        ChangeColorBlack();
      }, 2000);
    }, 1000);

更好的是你可以设置1个间隔但是使用一个标志，或者用其他方式确定下一个应该是哪种颜色。

var nextColor = "green";

setInterval(function() {
  if (nextColor == "green") {
    ChangeColorGreen();
    nextColor = "black";
  } else {
    ChangeColorBlack();
    nextColor = "green";
  }

}, 1000);

Answer 3

您可以创建一个独特的功能，并创建一个标志，将其更改为一种或另一种颜色：

function changeColor(t) {
  document.querySelector('#contact-title > p').style.color = t ? '#000' : '#5fc091';
  setTimeout(function() {
    changeColor(!t);
  }, 2000);
}

changeColor(true);

<div id="contact-title">
  <p>Coming Soon</p>
</div>

Answer 4

使用单个函数和一个标志变量，并具有以下内容：

var isGreen = false;
function toggleColor(){
    if(isGreen){isGreen = false; ChangeColorBlack();}
    else{isGreen = true; ChangeColorGreen();}
}

并通过setInterval调用它

setInterval(function() {
    toggleColor();
}, 2000);

如何用JS改变段落的颜色？

4 个答案: