在一起计时器_如何在纯JAVASCRIPT中构建倒数计时器

您不一定需要jQuery为您的站点添加倒数计时器。只需几行JavaScript即可创建一个可自定义的计时器，该计时器可计入预定义的日期和时间。您可以将计时器嵌入到多种页面中，例如即将推出和维护页面，电子商务商店，每日交易网站和活动注册页面。

在本教程中，我们将逐步创建倒数计时器，以便您可以了解所有内容。您可以在本文末尾找到完整的JavaScript代码。

1.创建HTML

让我们从HTML开始。倒数计时器将显示四个数字：天，小时，分钟和秒。为每个元素创建一个< span>元素，以便以后可以使用JavaScript定位它们。

还要在关闭< body>标记之前添加一个< script>标记，其中包含JavaScript文件的路径。

<div class = “container” >
     < p  id = “timer” > 
        < span  id = “timer-days” > </ span > 
        < span  id = “timer-hours” > </ span > 
        < span  id = “timer -mins“ > </ span > 
        < span  id = ”timer-secs“ > </ span > 
    </ p > 
< / div>
<script src =“script.js”> </ script>

2.设置结束日期

为倒计时到期的日期和时间创建一个新的全局变量（示例中为endDate）。您可以通过创建新的ref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date对象并调用其getTime（）方法来定义其值。

在结束日期变量将持有UTC格式的到期日期，显示自1970年1月1日，00毫秒：00：00.000 GMT。例如，2019年3月15日，12:00:00的UTC值是1552647600000。

var endDate = new  Date（“Mar 15,20199 12:00:00”）。getTime（）;

3.定义计时器

为计时器创建另一个全局变量。下面的示例使用函数表达式，因为这样您就不必单独调用该函数。但是，如果您愿意，也可以将其声明为函数语句。

该的setInterval（）全局JavaScript方法重复执行的功能。它的第一个参数是要执行的函数，第二个参数是执行之间的延迟。您需要以毫秒为单位声明延迟。这里，它将是1000，因为你想每秒更新一次计时器（1秒= 1000毫秒）。

var timer = setInterval（function（） {

    / *这是其余的JavaScript代码。* /

}，1000）;

4.计算剩余时间

在timer（）函数内部，定义两个新的局部变量。第一个（现在）将返回当前时间，另一个（t）将计算剩余时间。

在JavaScript中，空的Date（）对象返回当前的日期和时间。在现在变量调用它的getTime（）方法，并存储在UTC格式的当前时间。所述吨变量通过从结束日期中扣除当前时间来计算的剩余时间。

let now = new  Date（）。getTime（）;  让 t = endDate  - 现在;  

5.将UTC时间转换为天，小时，分钟和秒

创建一个if块，它将保存属于计时器的指令。此代码将每秒执行一次，直到剩余时间大于零。通过使用if 块，您不必在倒计时结束时停止计时器。

首先，您需要将剩余时间转换为可用格式。目前，它采用UTC格式，而您需要将其显示为天，小时，分钟和秒。因此，为剩余的天，小时，分钟和秒声明四个新的局部变量。

if（t> = 0）
{  
let days = Math .floor（t /（1000 * 60 * 60 * 24））;     
let hours = Math .floor（（t％（1000 * 60 * 60 * 24））/（1000 * 60 * 60））;     
let mins = Math .floor（（t％（1000 * 60 * 60））/（1000 * 60））;     
let secs = Math .floor（（t％（1000 * 60））/ 1000）;  
}

使用Math.floor（）内置JavaScript函数，您可以将任何浮点值向下舍入到最接近的整数。其余计算如下：

• 剩余天数：将UTC值除以1000 * 60 * 60 * 24，这是一天中的毫秒数（毫秒*秒*分钟*小时）。
• 剩余小时数：使用％remainder运算符获取先前计算的剩余部分，并将其除以一小时内的毫秒数（1000 * 60 * 60 =毫秒*秒*分钟）。
• 剩余分钟数：获取剩余分钟数并将其除以一分钟内的毫秒数（1000 * 60 =毫秒*秒）。
• 剩余秒数：获取剩余秒数并将其除以一秒钟内的毫秒数（1000）。

6.输出定时器

现在您拥有正确格式的所有数据，您可以将计时器输出到屏幕。文档对象的getElementById（）方法允许您定位在步骤1中创建的HTML元素，分别是＃timer-days，＃timer-hours，＃timer-mins和＃timer-secs。您可以使用innerHTML属性将内容放入目标HTML元素中。

将以下代码添加到时间转换计算下方的if（t> = 0）块中：

document .getElementById（“timer-days”）.innerHTML = days +   “<span class ='label'> DAY（S）</ span>” ; 
 document .getElementById（“timer-hours”）.innerHTML =（“0” + hours）.slice（-2）+  “<span class ='label'> HR（S）</ span>” ;  
document .getElementById（“timer-mins”）.innerHTML =（“0” + mins）.slice（-2）+  “<span class ='label'> MIN（S）</ span>” ;  
document .getElementById（“timer-secs”）.innerHTML =（“0” + secs）.slice（-2）+  “<span class ='label'> SEC（S）</ span>” ;

当代码值小于10时，上面的代码将小时，分钟和秒添加为“0”字符。虽然这不是必需的，但当数字位数在屏幕上不会一直变化时，计时器看起来会更好。

这可以通过格式化技巧来实现，该技巧利用可用于返回数据集的一部分的slice（）方法。例如， slice（1） 将字符串的第一个字符切掉并返回字符串的其余部分。类似地， slice（2）删除前两个字符并返回其余字符。负值返回目标字符而不是将它们切掉。因此，slice（-2）返回字符串的最后两个字符。

在代码中，您需要在每个数字前加上“0”，并使用切片（-2）返回最后两个字符。这样，JavaScript将为每个一位数字添加前导零，但保留两位数字。例如：

• （“05”）.slice（-2）=“05”;
• （“018”）.slice（-2）=“18”;

7.倒计时结束时通知用户

如果需要，您可以在倒计时结束时通知用户。创建一个else块并使用getElementById（）方法定位#timer元素。您可以在倒计时结束时将任何文本添加为要向用户显示的innerHTML。

其他 
{  
document .getElementById（“timer”）.innerHTML = “倒计时结束了！” ;  
}

或者，你可以省略整个else块，在这种情况下，当倒计时结束时，计时器将从屏幕上消失。

把它放在一起

就这样！以下是您需要用来创建倒数计时器的完整JavaScript代码：

var endDate = new Date("Mar 15, 2019 12:00:00").getTime();

var timer = setInterval(function() {

    let now = newDate().getTime();
    let t = endDate - now;
    
    if (t >= 0) {
    
        let days = Math.floor(t / (1000 * 60 * 60 * 24));
        let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        let secs = Math.floor((t % (1000 * 60)) / 1000);
    
        document.getElementById("timer-days").innerHTML = days +
        "<span class='label'>DAY(S)</span>";
    
        document.getElementById("timer-hours").innerHTML = ("0"+hours).slice(-2) +
        "<span class='label'>HR(S)</span>";
    
        document.getElementById("timer-mins").innerHTML = ("0"+mins).slice(-2) +
        "<span class='label'>MIN(S)</span>";
    
        document.getElementById("timer-secs").innerHTML = ("0"+secs).slice(-2) +
        "<span class='label'>SEC(S)</span>";
    
    } else {

        document.getElementById("timer").innerHTML = "The countdown is over!";
    
    }
    
}, 1000);

9.添加一些CSS

您可以按照自己的方式设置倒数计时器的样式。下面的CSS使用flexbox将其水平（使用justify-content）和垂直（使用 align-items）定位到屏幕的中心。

body {
    margin: 0;
    padding: 0;
}
.container {
    background: #222;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#timer {
    color: #fff;
    font-size: 4rem;
}
.label {
    font-size: 2.5rem;
    padding-left: 0.25rem;
}

最后结果

以下是使用上述CSS的倒数计时器的样子。当计时器运行时，它显示天，小时，分钟和秒：

倒计时结束后，它会向用户显示通知：