迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中的倒数计时器

作者:迹忆客 最近更新:2023/03/10 浏览次数:

这篇文章将为你提供一种使用 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 //相当于1分29秒
1
29

接下来,我们通过使用 HTML 节点元素的 textContent 属性设置文本来显示计算出的分钟数和秒数。

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

接下来,减少 secondsRemaining 的值,计时器功能通过 setInterval() 方法每秒执行一次。最后,一旦 secondsRemaining 值为 0,则触发 clearInterval(countInterval) 以停止计时器。它还可以确保计时器不会重新启动或进入负值状态。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便