JavaScript 中的倒数计时器

  2. 贴士文章
  3. JavaScript 贴士
  4. JavaScript 中的倒数计时器
Nithin Krishnan 2023年10月12日
JavaScript JavaScript Timer
  1. JavaScript 中的到时计时器示例代码
  2. JavaScript 中的倒数计时器代码的说明
JavaScript 中的倒数计时器

这篇文章将为你提供一种使用 JavaScript 创建倒数计时器的简便方法。

下面是一个一分半钟的计时器的代码。

<h1 class="text-center" id="count-down-timer"></h1>

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

window.onload = function() {
  let time_minutes = 1;   // Value in minutes
  let time_seconds = 30;  // Value in seconds

  let duration = time_minutes * 60 + time_seconds;

  element = document.querySelector('#count-down-timer');
  element.textContent =
      `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

  startCountDown(--duration, element);
};

JavaScript 中的到时计时器示例代码

  • 设置计时器的 HTML 标签

    在上面的代码中，<h1> 标签保留计时器显示。在你的网页 HTML 中使用此代码。由于在 JavaScript 中使用 count-down-timer id 访问元素时需要 id="count-down-timer"，以便在运行时动态更改元素文本。

    <h1 class="text-center" id="count-down-timer"></h1>
  • 设置计时器值

    标签到位后，下一步就是设置计数时间值。通常，网页使用内置在其代码中的硬编码时间，该时间不可自定义。你可以在 window.onload 方法中以 time_minutes 和 time_seconds 设置计时器。例如，如果你希望将计时器设置为一个半分钟，则按如下所示设置代码：

    let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

    如果希望设置为 3 分钟，则设置 time_minutes = 3 并保留 time_seconds = 0。现在，一旦你运行代码或重新加载 HTML，就可以获取更新的输出。

JavaScript 中的倒数计时器代码的说明

  • 执行从 window.onload 函数开始。它采用你设置的计时器值，并计算总的持续时间（以秒为单位）。
    let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;
  • document.querySelector('#count-down-timer') 获取元素的 HTML 节点。该节点将用于刷新计时器值。
    element = document.querySelector('#count-down-timer');
  • 元素可用后，将使用我们设置的值进行初始化。例如，在代码中是 1 分 30 秒。它以填充格式设置。
    function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

    输出：

    03
12
  • pappedFormat(num) 函数返回填充的数字。在数分钟和数秒内，通过为数字值加上前缀 0 来填充它们。例如，将 2 分钟和 5 秒分别填充为 02 和 05。
    element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
  • 接下来，我们调用 startCountDown(--duration, element) 函数，以秒为单位传递 duration 以及 display 元素的 HTML 节点。我们现在显示值 01:30。因此，我们需要计时器从 01:29 开始。这就是为什么我们使用持续时间为 --duration 的减一元运算符的原因。
    startCountDown(--duration, element);
  • startCountDown(duration, element) 是计时器的核心。在此，我们使用 JavaScript 的 setInterval(function(){}, 1000) 函数在每秒（1000 毫秒）后执行计时器，直到使用 clearInterval(countInterval) 将其清除或终止。
    function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}
  • 在 setinterval() 函数内部，计算了显示的分钟和秒数。通过将 remainingSeconds 值除以 60 得到分钟值并取其整数部分来计算分钟。
    let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

    输出：

    89  // Equivalent to 1 min and 29 seconds
1
29
  • 接下来，我们通过使用 HTML 节点元素的 textContent 属性设置文本来显示计算出的分钟数和秒数。
    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
  • 接下来，减少 secondsRemaining 的值，计时器功能通过 setInterval() 方法每秒执行一次。
  • 最后，一旦 secondsRemaining 值为 0，则触发 clearInterval(countInterval) 以停止计时器。它还可以确保计时器不会重新启动或进入负值状态。

相关文章 - JavaScript Timer