第一次倒计时后未显示 HTML 中的计时器

debugcn 发表于 Dev

波特曼

已经在这个版本的 whack-a-mole 上工作了一段时间。当前版本在这里和代码如下。

问题在于靠近底部的 startGame() 函数。当我每次按下按钮时，它都会正确地从 10 倒计时，当我 console.log 计时器时，它在某种意义上起作用。但是，在第一次之后，它会尝试说“超时”和当前计时器编号以及相同的时间。

我错过了什么？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <button class=button onClick="startGame()">Start!</button>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>

  <h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2>

  <script>
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    const countDown = document.getElementById('countDown');
    let lastHole;
    let score = 0;


    function randomTime(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    }

    function randomHole(holes) {
      const idx = Math.floor(Math.random() * holes.length);
      const hole = holes[idx];
      if (hole === lastHole) {
        return randomHole(holes);
      }
      lastHole = hole
      return hole;
    }

    function peep() {
      const time = randomTime(200, 1000);
      const hole = randomHole(holes);
      hole.classList.add('up');
      setTimeout(() => {
        hole.classList.remove('up');
        if (!timeUp) peep();

      }, time);
    }

    function startGame() {
      scoreBoard.innerHTML = 0;
      timeUp = false;
      score = 0;
      let timer = 10;
      peep();
      setTimeout(() => timeUp = true, 10000)

      var timeOut = setInterval(function () {
        timer--;
        if (timer > 0) {
          countDown.classList.remove('timeUp')
          countDown.innerHTML = timer;
        } else {
          countDown.innerHTML = "Times up!";
          countDown.classList.add('timeUp');
          return;
        }
        console.log(timer);
      }, 1000);
    }

    function bonk(e) {
      if (!e.isTrusted) return; //cheater without clicking
      score++;
      this.classList.remove('up');
      scoreBoard.textContent = score;
    }

    moles.forEach(mole => mole.addEventListener('click', bonk));
  </script>
</body>

</html>

泰勒·罗珀

每次调用时，startGame()您都在创建另一个间隔，但您永远不会删除前一个。您最终会同时运行多个时间间隔 - 他们的一些计时器是完整的，而最近的则没有，因此它们最终会发生冲突并来回更改文本。

只需将您的替换return为clearInterval(timeOut)：

var timeOut = setInterval(function () {
  timer--;
  if (timer > 0) {
    countDown.classList.remove('timeUp')
    countDown.innerHTML = timer;
  } else {
    countDown.innerHTML = "Times up!";
    countDown.classList.add('timeUp');
    clearInterval(timeOut);
  }
  console.log(timer);
, 1000);

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <button class=button onClick="startGame()">Start!</button>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>

  <h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2>

  <script>
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    const countDown = document.getElementById('countDown');
    let lastHole;
    let score = 0;


    function randomTime(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    }

    function randomHole(holes) {
      const idx = Math.floor(Math.random() * holes.length);
      const hole = holes[idx];
      if (hole === lastHole) {
        return randomHole(holes);
      }
      lastHole = hole
      return hole;
    }

    function peep() {
      const time = randomTime(200, 1000);
      const hole = randomHole(holes);
      hole.classList.add('up');
      setTimeout(() => {
        hole.classList.remove('up');
        if (!timeUp) peep();

      }, time);
    }

    function startGame() {
      scoreBoard.innerHTML = 0;
      timeUp = false;
      score = 0;
      let timer = 10;
      peep();
      setTimeout(() => timeUp = true, 10000)

      var timeOut = setInterval(function() {
        timer--;
        if (timer > 0) {
          countDown.classList.remove('timeUp')
          countDown.innerHTML = timer;
        } else {
          countDown.innerHTML = "Times up!";
          countDown.classList.add('timeUp');
          clearInterval(timeOut);
        }
        console.log(timer);
      }, 1000);
    }

    function bonk(e) {
      if (!e.isTrusted) return; //cheater without clicking
      score++;
      this.classList.remove('up');
      scoreBoard.textContent = score;
    }

    moles.forEach(mole => mole.addEventListener('click', bonk));
  </script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。