Question

在下面的代码中，当用户单击reset按钮时，我试图停止功能color-blast。我为其余按钮提供了一个偶数侦听器功能，但是有人可以帮助我向事件侦听器中的重置按钮添加一些代码，以停止发色功能。

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
   
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };

.winner {
    color: green;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

Answer 1

您应该在clearInterval函数中使用reset

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;
var colorBlastInterval;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
document.body.style.backgroundColor = 'white';
   clearInterval(colorBlastInterval);
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    colorBlastInterval = setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };

.winner {
    color: green;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

Answer 2

如果要停止setInterval，可以使用clearInterval。但是，为此，您需要将setInterval设置为全局变量。在代码中的某处，将其初始化为var myInterval;，使其具有全局作用域。然后，在您的colorBlast函数中，setInterval处具有：

myInterval = setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}

要停止该功能时，请在事件监听器中调用clearInterval(myInterval);

如何从另一个功能停止一个功能

2 个答案: