时间戳

首页 > 解决方案 > 如何使用图像按钮启动此计时器？

javascript - 如何使用图像按钮启动此计时器？

问题描述

我有一个 30 秒的计时器和一个图像。我希望计时器仅在单击图像时才开始，即图像按钮 - 我该怎么做？

这就是我目前拥有计时器的方式，并在页面本身上显示：

<h2>Countdown left: <span id="timer"></span></h2>

这是图像：

<img id="img" src="image.gif" />

我的计时器是 JS：

var seconds = 30;
var countdown = setInterval(function() {
  seconds--;
  document.getElementById("countdown").textContent = seconds;
  if (seconds <= 0) clearInterval(countdown);
}, 1000);

我怎样才能将两者结合起来？

标签： javascripthtml

解决方案

您可以向图像添加click事件侦听器，这将启动计时器。另外，我已经添加{once: true}了该函数，以便该函数只执行一次（否则它会破坏计时器）。

document.querySelector("#img").addEventListener("click", () => {
  var countdown;

  var seconds = 30;

  countdown = setInterval(function() {
    seconds--;
    document.getElementById("timer").textContent = seconds;
    if (seconds <= 0) clearInterval(countdown);
  }, 1000)
},{ once: true});
<h2>Countdown left: <span id="timer"></span></h2>

<img id="img" src="https://assets.stickpng.com/thumbs/59060d740cbeef0acff9a660.png" />

如果要在每次单击时重置计时器，则需要clearInterval在设置另一个计时器之前。

var countdown;

document.querySelector("#img").addEventListener("click", () => {
  if (countdown) {
    clearInterval(countdown);
  }

  var seconds = 30;

  countdown = setInterval(function() {
    document.getElementById("timer").textContent = seconds;

    seconds--;
    if (seconds <= 0) clearInterval(countdown);
  }, 1000)
});
<h2>Countdown left: <span id="timer"></span></h2>

<img id="img" src="https://assets.stickpng.com/thumbs/59060d740cbeef0acff9a660.png" />

推荐阅读