暂停和启动 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

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

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

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

Answer 2

需要一点点清理。对于 clearInterval，你必须清空定时器的 id

var seconds = 60;
var shots = 0;
var timer;
var c = 60;

function start() {
  clearInterval(timer)
  timer = setInterval(( ) =>{
    updateUi()
  }, 1000);
}
function pause() {
  clearInterval(timer)
}
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 3

你也可以使用 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 4

<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)
}