Question

你好，互联网的人们。

我是stackoverflow和javascript / jquery的新手，目前正在尝试学习它。

我现在的问题是：

我想要一个默认情况下为黑色的盒子，并且每秒将其颜色更改为蓝色。然后，它应保持蓝色约0.2秒钟，并恢复为其默认颜色（黑色）。这整个动作应该在一个循环中一次又一次地重复。我读了一些有关 setInterval 和 delay 的信息，但我不确定，是否可以以任何方式解决我的问题。

到目前为止，我的代码是：

var box = $("#box");

function changecolor(){
box.css("background-color", "blue")
}
setTimeout(changecolor, 1000);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box{
  
background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

Answer 1

在该函数中，您可以测试颜色，然后调用超时，然后递归调用同一函数：

var box = $("#box");

function changecolor() {
  if (box.css("background-color") === "rgb(0, 0, 0)") {
    box.css("background-color", "blue")
    setTimeout(changecolor, 200)
  } else {
    box.css("background-color", "black")
    setTimeout(changecolor, 1000);
  }
}
changecolor()

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box {
  background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

Answer 2

其中的挑战是您需要以不同的延迟交换颜色。

使用setInterval w/setTimeout意味着您要在蓝色->黑色之间切换大约200ms（而不是整个1000ms），因为setInterval是颜色之间的固定时间。基本上，您是在1000毫秒内交换颜色。

对此的一种解决方案是连续调用setTimeout，并传递不同的延迟值。

这是一个例子：

var box = $("#box");

function colorChanger (delay) {
    // If delay is 1sec, set color to black.
    // Otherwise, we set color to blue.
    var color = delay === 1000 ? "black" : "blue";

    // Apply color to element
    box.css("background-color", color);

    // The color set above will be changed when this
    // timer is called (either 1 sec for black
    // or .2 sec for blue. Within the timer, we will
    // flip the delay (if 1sec, next iteration will be 
    // 0.2 secs)
    setTimeout(function () {
        // Flip for next loop
        colorChanger(delay === 1000 ? 200 : 1000);
    }, delay);
}
// Kick off color changer
colorChanger(200);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box {
  background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
    </div>

Answer 3

只需使用setInterval方法并执行以下操作：

var box = $("#box");

var count = 0;
function changecolor() {
if (count == 0) {
  box.css("background-color", "blue");
  count = 1;
}
  else {
    box.css("background-color", "black")
    count = 0;
  }

}
setInterval(changecolor, 200);

setInterval()每200毫秒运行一次函数changecolor()。我们使用一个变量来跟踪要更新的颜色。如果为0，我们将其更新为蓝色，否则为黑色。

循环中带有jquery的延迟功能（颜色变化）

3 个答案: