本文实例讲述了JavaScript页面倒计时功能。分享给大家供大家参考，具体如下：
效果图：
源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net JS倒计时</title>
<style>
h3{text-align:center;line-height:50px;height:50px;margin-top:100px;}
#timer{text-align:center;}
</style>
</head>
<body>
<h3>倒计
JavaScript页面倒计时功能是网页开发中常见的需求，主要用于创建定时事件，如活动开始前的预告、考试倒计时等。本示例提供了一个简单的JavaScript实现，通过动态更新页面元素来显示剩余时间。
我们需要了解JavaScript中的日期对象(Date)。在JavaScript中，Date对象用于处理日期和时间。我们可以创建一个新的Date对象来获取当前时间，或者传入一个日期字符串来指定特定的时间点。
在本例中，我们有以下关键部分：
1. **设置初始时间和结束时间**：
- `startTime` 初始化为当前时间，但在这个示例中没有使用。
- `endTime` 设置为一个特定的日期字符串（"2017-4-20 19:30:00"），然后通过`replace()`方法替换短横线为斜线，以便Date对象能够正确解析。`new Date(endTime.replace(/-/g,'/'))`将字符串转换为Date对象。
2. **计算时间差**：
- `diffTime` 计算结束时间与当前时间（或开始时间）之间的毫秒数差值。
3. **倒计时函数**：
- `timeBack` 使用`setInterval`函数每秒执行一次。该函数减去1000毫秒（即1秒）并更新页面上的时间显示。
- `formatDate` 函数用于将剩余的毫秒数转换为小时、分钟和秒的格式，并确保每个单位前面都有零填充，如果需要的话。
以下是`timeBack`和`formatDate`函数的详细说明：
- `timeBack`：
- `setInterval` 创建了一个定时器，它每1000毫秒（1秒）执行一次回调函数。
- 在回调函数中，如果`diffTime`大于等于1000毫秒，就减少1000毫秒，并调用`formatDate`函数来更新显示的时间。
- `formatDate`：
- `d`, `h`, `m`, 和 `s` 分别代表天数、小时数、分钟数和秒数。它们通过除以相应的毫秒数计算得出。
- `Math.floor` 用于向下取整，确保得到的都是整数。
- `if` 语句用来检查单位是否小于10，如果是，则在前面添加零。
这段代码在HTML中嵌入了JavaScript，通过`<script>`标签定义了这些函数，并在页面上创建了一个`<p>`元素（ID为`timer`），用于显示倒计时。
这个简单的倒计时示例可以帮助开发者理解如何使用JavaScript进行时间操作和动态更新页面内容。然而，在实际应用中，可能需要考虑更复杂的情况，如处理时区差异、跨多个日期的倒计时以及用户可能更改系统时间的情况。
此外，如果你在开发中需要对日期和时间进行更多的操作，可以查阅JavaScript的Date对象API，如`getFullYear()`, `getHours()`, `getMinutes()`, `getSeconds()`等方法，以及`getTimezoneOffset()`来获取当前时区偏移。对于更复杂的日期和时间处理，可以使用第三方库，如Moment.js或date-fns，它们提供了丰富的功能和易用的API。
