JavaScript 中的倒数计时器
Nithin Krishnan
2023年1月30日
2021年4月29日
这篇文章将为你提供一种使用 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)
以停止计时器。它还可以确保计时器不会重新启动或进入负值状态。