时间戳

首页 > 解决方案 > 暂停和启动 JS 倒计时

javascript - 暂停和启动 JS 倒计时

问题描述

我正在尝试为我的网站开发一个百夫长倒数计时器。这是一个饮酒游戏。

计时器的工作方式是：它是一个 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;
}

如果有人可以帮助我并向我展示我做错了什么以及如何使代码变得更好，请这样做！

标签： javascripthtml

解决方案

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

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

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

推荐阅读