暂停和启动 JS 倒计时

Question

我正在尝试为我的网站开发一个百夫长倒数计时器。这是一个饮酒游戏。计时器的工作方式是：它是一个 60 秒倒计时计时器。每次计时器达到 0 时，它都会为射击计数器 +1 并重新启动。它将执行此操作 100 次。游戏是你必须做 1 次射击，每分钟 100 分钟。我是 JS 的初学者，我学到了很多东西，但我很难让它按照我想要的方式工作。我只需要一个“开始”按钮、一个“暂停”按钮和一个“重置”按钮，但我似乎无法找到一种方法让这些按钮工作而不会弄乱计时器。这是HTML代码：<div class="inner">  <h1 class="heading alt">Centurions Timer</h1>  <p>1 Shot. Every Minute. 100 Minutes.</p>  <p>___________________________________</p>  <div id="timer">    <p id="seconds">60</p>    <p id="shots">0</p>  </div>  <input type="button" value="Start" onclick="timer()">  <input type="button" value="Pause" onclick="clearInterval(myTimer)"></div>这是JS代码：var seconds = 60;var shots = 0;var timer;var c = 60;function timer() {    timer = setInterval(myTimer, 1000)}function myTimer() {    document.getElementById("seconds").innerHTML = --c;    if (c == 0) {        shots = shots + 1;        c = 60;    }    document.getElementById("shots").innerHTML = shots;}如果有人可以帮助我并向我展示我做错了什么以及如何使代码变得更好，请这样做！

Answer 1

您还可以使用 Pub Sub 模型，使代码看起来干净。

var seconds = 60;

var shots = 0;

var c = 60;

function Emitter() {

  this.cb;

  this.on = cb => {

    this.cb = cb;

  };

  this.emit = () => {

    this.cb && this.cb();

  };

  this.cancel = () => {

    this.cb = null;

  };

}

const emitter = new Emitter();

const tick = () => {

  setInterval(() => {

    emitter.emit();

  }, 1000);

};

tick()

function start() {

  emitter.on(updateUi);

}

function pause() {

  emitter.cancel();

}

function updateUi() {

  document.getElementById("seconds").innerHTML = --c;

  if (c == 0) {

    shots = shots + 1;

    c = 60;

  }

  document.getElementById("shots").innerHTML = shots;

}

<div class="inner">

    <h1 class="heading alt">Centurions Timer</h1>

    <p>1 Shot. Every Minute. 100 Minutes.</p>

    <p>___________________________________</p>

    <div id="timer">

        <p id="seconds">60</p>

        <p id="shots">0</p>

    </div>

    <input type="button" value="Start" onclick="start()">

    <input type="button" value="Pause" onclick="pause()">

</div>

Answer 2

<div class="inner">

  <h1 class="heading alt">Centurions Timer</h1>

  <p>1 Shot. Every Minute. 100 Minutes.</p>

  <p>___________________________________</p>

  <div id="timer">

    <p id="minutes">100</p>

    <p id="seconds">60</p>

    <p id="shots">0</p>

  </div>

  <input type="button" value="START" onclick="start()">

  <input type="button" value="PAUSE" onclick="pause()">

  <input type="button" value="RESET" onclick="reset()">

</div>

将 onclick 功能更改为更有意义的功能。添加了一个额外的按钮和更多逻辑，以在达到 100 分钟时自动停止。

var seconds = 60,

    minutes = 100,

    shots   = 0;

    timer   = "";

// this will just stop the timer, if you click start it will resume from where it left off

function pause() {

  clearInterval(timer);

}

// resets seconds/minutes/shots, stops game

function reset() {

  clearInterval(timer);

  seconds = 60;

  minutes = 100;

  shots   = 0;

  timer   = "";

  document.getElementById("minutes").innerHTML = minutes;

  document.getElementById("seconds").innerHTML = c;

  document.getElementById("shots").innerHTML   = shots;

}

// starts game from wherever it was left

function start() {

  timer = setInterval(function() {

    document.getElementById("seconds").innerHTML = c--;

    if (c === 0) {

      document.getElementById("minutes").innerHTML = --minutes;

      // when 100 minutes are up, game will stop and reset

      if (minutes === 0) {

        reset();

      }

      shots++;

      c = 60;

    }

    document.getElementById("shots").innerHTML = shots;

  }, 1000)

}

Answer 3

首先，考虑重命名您的方法timer()或变量timer以消除两者之间的歧义。

接下来，setInterval()返回一个区间 ID，您将其存储在timer.

clearInterval()将区间 ID 作为参数，因此请尝试将timer变量而不是myTimer（函数）传递给它