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)。您可以通过创建新的Date对象并调用其getTime()方法来定义其值。
结束日期变量将持有时间戳格式的到期日期，例如，2019年3月15日，12:00:00的时间戳是1552647600000。
const endDate = new Date("3 15 2019 12:00:00").getTime();
3.定义计时器
为计时器创建另一个全局变量。下面的示例使用函数表达式，因为这样您就不必单独调用该函数。但是，如果您愿意，也可以将其声明为函数语句。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。。它的第一个参数是要执行的函数，第二个参数是执行之间的延迟。您需要以毫秒为单位声明延迟。这里，它将是1000，因此实例是以一秒更新一次定时器(1秒= 1000毫秒)。
const timer = setInterval（function（） {
/ *这是其余的JavaScript代码。* /
}，1000）;4.计算剩余时间
在timer()函数内部，定义两个新的局部变量。第一个(now)将返回当前时间，另一个(t)将计算剩余时间。
在JavaScript中，空的Date()对象返回当前的日期和时间。now变量调用其gettime()方法并以UTC格式存储当前时间。t变量通过从结束日期中扣除当前时间来计算剩余时间。
let now = new Date().getTime();
let t = endDate - now; 5.将时间戳格式转换为天，小时，分钟和秒
创建一个if块，它将保存属于计时器的指令。此代码将每秒执行一次，直到剩余时间大于零。通过使用if块，您不必在倒计时结束时停止计时器。
首先，您需要将剩余时间转换为可用格式。目前，它采用时间戳格式，而您需要将其显示为天，小时，分钟和秒。因此，为剩余的天，小时，分钟和秒声明四个新的局部变量。
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函数，您可以将任何浮点值向下舍入到最接近的整数。其余计算如下：
剩余天数：将时间戳除以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”，并使用slice(-2）返回最后两个字符。这样，JavaScript将为每个一位数字添加一个零，但保留两位数字。例如：
('05').slice(-2) = '05';
('018').slice(-2) = '18';
7.倒计时结束时通知用户
如果需要，可以在倒计时结束时通知用户。创建一个else块并使用getElementById()方法定位#timer元素。可以在倒计时结束时将任何文本添加为要向用户显示的innerHTML。
else {
document.getElementById("timer").innerHTML = "倒计时结束了！";
}
或者，你可以省略整个else块，在这种情况下，当倒计时结束时，计时器将从屏幕上消失。
8.添加一些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;
}
9.把它放在一起
就这样！下面是需要用来创建倒数计时器的完整JavaScript代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>
<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>
const endDate = new Date("3 15, 2019 0:00:00").getTime();
const timer = setInterval(function() {
let now = new Date().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 = "倒计时结束了！";
}
}, 1000);
</script>
</body>
</html>
10.最后结果
以下是使用上述CSS的倒数计时器的实例。当计时器运行时，它显示天，小时，分钟和秒：
