Question

我已经在这里查看了各种set / clearInterval问题，但它们似乎都不属于我想要做的事情。

我有一个简单的应用程序，它显示一个div，当点击一个按钮时，它会变成不同的颜色，如闪光灯。我想要在单击按钮时开始更改颜色，并在再次单击按钮时停止更改。

我很难过，试图弄清楚如何根据内部html按钮点击时的间隔来清除间隔。我甚至在这里正确的轨道？谢谢！

<div id="party" width="200px" height="200px"></div>
<button id="btn" type="button" onclick="setInterval(function(){changeColor();}, 460)">
        Party On!</button>

<script>

var box = document.getElementById("box");

function changeColor() {

if (document.getElementById("btn").innerHTML == "Party On!") {
    document.getElementById("btn").innerHTML - "Party Off"
}

if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
}

else if (box.style.backgroundColor == "blue") {
    box.style.backgroundColor = "green";

}

else if (box.style.backgroundColor == "green") {
    box.style.backgroundColor = "yellow";

}

else if (box.style.backgroundColor == "yellow") {
    box.style.backgroundColor = "red";

}

if (document.getElementById("button").innerHTML == "Party Off" {
    // Code to clear interval gos here?
}

}
</script>

Answer 1

您可以尝试：

<button id="btn" type="button" onclick="toggleInterval()">Party On!</button>

<script type="text/javascript">
var intervalId;
function toggleInterval() {
  if (!intervalId) {
    intervalId = setInterval(function(){changeColor();}, 460);
  } else {
    clearInterval(intervalId);
    intervalId = null;
  }
}


// ...
</script>

http://jsfiddle.net/qGL8s/1/

setInterval和clearInterval使用相同的按钮？

1 个答案: