多个倒数计时器js - Html

本文介绍了如何使用JavaScript和HTML创建多个倒数计时器，并且可以自定义计时器的样式和时间设置。

HTML布局

首先，我们需要在HTML文件中定义计时器的布局。我们可以使用div元素来承载计时器的各个组件，例如显示时间的元素、开始/停止按钮等。以下是一个简单的HTML布局示例：

<div class="countdown">
  <div class="time">00:00:00</div>
  <button class="start">开始</button>
  <button class="stop">停止</button>
</div>

这个布局使用了一个class名为“countdown”的div来包含计时器组件。其中，显示时间的元素使用了class名为“time”的div，开始和停止按钮使用了class名为“start”和“stop”的button。

JavaScript计时器

接下来，我们需要编写JavaScript代码，用于实现倒数计时器的逻辑。我们可以使用setInterval()函数来每秒更新一次计时器的时间，并且定时器结束后使用clearInterval()函数来停止计时器。以下是JavaScript代码示例：

function countdown(element, minutes, seconds) {
  // 计算总共需要倒计时的毫秒数
  var totalMilliseconds = (minutes * 60 + seconds) * 1000;

  // 更新倒计时的时间
  function updateTimer() {
    var remainingMilliseconds = totalMilliseconds - Date.now() + startTime;

    // 如果倒计时结束，则停止计时器
    if (remainingMilliseconds <= 0) {
      clearInterval(intervalID);
      element.textContent = "00:00:00";
      element.classList.remove("active");
      return;
    }

    // 格式化剩余时间并更新显示
    var remainingSeconds = Math.floor(remainingMilliseconds / 1000);
    var minutes = Math.floor(remainingSeconds / 60);
    var seconds = remainingSeconds % 60;
    var formattedTime = zeroPad(minutes) + ":" + zeroPad(seconds);
    element.textContent = formattedTime;
    element.classList.add("active");
  }

  // 补齐时间位数
  function zeroPad(number) {
    var pad = "00";
    return (pad + number).slice(-2);
  }

  // 开始倒计时
  var startTime = Date.now();
  var intervalID = setInterval(updateTimer, 1000);
  updateTimer();

  // 返回停止计时器的函数
  return function() {
    clearInterval(intervalID);
    element.textContent = "00:00:00";
    element.classList.remove("active");
  };
}

这个函数使用了三个参数：一个DOM元素，以及需要倒计时的分钟和秒钟数。它会计算出总共需要倒计时的毫秒数，并且使用setInterval()函数每秒钟更新显示时间的元素。如果倒计时结束，则使用clearInterval()函数停止计时器。通过使用返回函数的方式，我们可以在需要时手动停止计时器。

样式设置

最后，我们需要为计时器添加样式，使得它看起来更加美观。你可以根据自己的需要进行样式定制，以下是一个简单的CSS样式示例：

.countdown {
  display: inline-block;
  background-color: #f2f2f2;
  border: 1px solid #999;
  padding: 10px;
}

.countdown .time {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.countdown button {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.countdown button:hover {
  background-color: #3e8e41;
}

这个样式使用了一个class名为“countdown”的div来包含倒计时器的各个组件。其中，显示时间的元素使用了class名为“time”的div，开始和停止按钮使用了button元素。

至此，我们已经完成了一个简单的倒数计时器的创建。你可以复制上述代码来尝试创建多个计时器，并且对样式进行自定义设置，以符合你的应用需求。