如何仅使用 Vanilla JavaScript 构建简单的倒计时器？

使用 Vanilla JavaScript 创建简单的倒计时器

在 Web 开发中，通常需要实现倒计时器。虽然存在各种解决方案，但初学者可能会发现它们过于复杂。本文演示了如何使用普通实现在 JavaScript 中创建一个简单的非 jQuery 倒计时器。

目标：创建一个倒计时器：

• 从“05:00”倒计时到“00:00”。
• 重置为到达“00:00”后的“05:00”。
• 避免像 Date 对象这样的复杂函数。

实现：

到创建我们的计时器，我们使用以下内容步骤：

1. 定义 startTimer 函数： 该函数有两个参数：持续时间（以秒为单位）和要更新的显示元素。
2. 初始化计时器和变量： 我们将计时器设置为提供的持续时间并计算初始分钟数和
3. 使用 setInterval 更新显示： 每一秒，我们都会重新计算分钟和秒，如果需要的话用前导零格式化它们，并更新显示元素。
4. 在达到 0 时重置计时器：每次递减后，我们检查计时器是否已达到 0，如果达到则重置它

代码：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

HTML：

<div>Registration closes in <span>

此代码创建倒计时器，每秒更新显示元素的剩余时间。当计时器到达 00:00 时，它会重置为 05:00。

以上是如何仅使用 Vanilla JavaScript 构建简单的倒计时器？的详细内容。更多信息请关注PHP中文网其他相关文章！