时间戳

首页 > 解决方案 > Javascript开始/停止按钮更改innerHTML并启动计时器，但不履行任何其他部分功能

javascript - Javascript开始/停止按钮更改innerHTML并启动计时器，但不履行任何其他部分功能

问题描述

我有一个按钮，我试图将其用作启动或停止倒数计时器的事件的开始和停止。但是，它目前仅启动并更改为停止，但不会更改回开始或停止计时器倒计时。

有没有更好的方法来做到这一点？我还包括了重置按钮，因为我试图在按下它时重置它，但它目前只是变回开始，但在我完成此操作后开始不会再次触发。

((d) => {
  let btn = d.getElementById("btn");
  let reset = d.getElementById("reset");
  let countdown = d.getElementById("countdown");


  let counter;
  let startTime = 1500;

  let timerFormat = (s) => {
    return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
  };

  countdown.innerHTML = timerFormat(startTime);

  let timer = () => {
    startTime--;
    countdown.innerHTML = timerFormat(startTime);
    if (startTime === 0) clearInterval(counter);
  };

  btn.addEventListener("click", () => {
    if (stop) {
      start();
      btn.innerHTML = "Stop";
    } else {
      stop();
      btn.innerHTML = "Start";
    }
  });

  let start = () => {
    counter = counter || setInterval(timer, 1000);
  };

  let stop = () => {
    clearInterval(counter);
    counter = undefined;
  };

  reset.onclick = () => {
    startTime = 1500;
    countdown.innerHTML = timerFormat(startTime);
    if (btn.innerHTML === "Stop") {
      btn.innerHTML = "Start";
    }
  };
})(document);
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/styles.css" />
    <script defer src="../JS/timer.js"></script>
  </head>
  <body>
    <div id="countdown"></div>
    <div class="btn__container">
      <button class="btn" id="btn">Start</button>
      <button class="btn" id="reset">Reset</button>
    </div>
  </body>
</html>

标签： javascript

解决方案

您的问题在于如何确定是开始还是停止：

if (stop) {

stop是一个函数，因此它具有“真实”值，并且您的if语句将始终评估为true. 相反，请检查counter.

其他：

  • 如果您能提供帮助，请不要使用.innerHTML它，当然，当您使用的字符串不包含任何 HTML 时也不要使用。.innerHTML 具有安全性和性能影响。相反，使用 .textContent.
  • 虽然计时器不会 100% 准确计时，但您可以通过让回调每秒运行一点点来使计数器更准确一点。原因是每秒运行一次意味着如果计时器在一秒钟后没有运行，您可能会在计数器上跳过一秒钟。

((d) => {
  let btn = d.getElementById("btn");
  let reset = d.getElementById("reset");
  let countdown = d.getElementById("countdown");


  let counter;
  let startTime = 1500;

  let timerFormat = (s) => {
    return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
  };

  countdown.textContent = timerFormat(startTime);

  let timer = () => {
    startTime--;
    countdown.textContent = timerFormat(startTime);
    if (startTime === 0) clearInterval(counter);
  };

  btn.addEventListener("click", () => {
    if (counter) {
      stop();
      btn.textContent = "Start";
    } else {
      start();
      btn.textContent = "Stop";
    }
  });

  let start = () => {
    counter = counter || setInterval(timer, 950);
  };

  let stop = () => {
    clearInterval(counter);
    counter = null;
  };

  reset.onclick = () => {
    startTime = 1500;
    countdown.textContent = timerFormat(startTime);
    if (btn.textContent === "Stop") {
      btn.textContent = "Start";
    }
  };
})(document);
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/styles.css" />
    <script defer src="../JS/timer.js"></script>
  </head>
  <body>
    <div id="countdown"></div>
    <div class="btn__container">
      <button class="btn" id="btn">Start</button>
      <button class="btn" id="reset">Reset</button>
    </div>
  </body>
</html>

推荐阅读