创建 JavaScript 倒计时计时器

18 Mar 2025 | 8 分钟阅读

倒计时器是一种显示在登录页面的网页或虚拟时钟。它从一个特定的日期开始倒计时，表示事件的开始或结束。

倒计时器可以用于电子商务网站，以显示促销的开始（或结束）。倒计时器的目的是说服客户采取行动，例如购买产品或服务。

值得注意的是，JavaScript 倒计时器是可重用的，因此我们可以将其用于特定的登录页面。我们也可以使用此倒计时在同一页面上生成新的倒计时器。

倒计时器的基本原理

倒计时器是一个完美的计时器，可用于在网站或博客上显示任何特殊事件的倒计时，例如截止日期、生日或纪念日。

以下是倒计时器的基本原理

设置合适的结束日期。
确定剩余时间。
将时间转换为所需的格式。
从时钟数据创建可重用对象。
在网页上显示时钟，并在倒计时归零时停止计时器。

步骤 1：设置合适的结束日期

有效的结束日期和时间必须是 JavaScript 的 Date.parse() 方法支持的格式之一的字符串。

给出的语法使用了 JavaScript 中的结束日期。

<script>
const date_time = new Date('December 02, 2022 01:02:03').getTime();
</script>

步骤 2：确定剩余时间。

通过从当前日期和时间减去结束日期来计算剩余时间，然后计算天、小时、分钟和秒数。

Math.floor() 函数显示小于或等于特定值的最大整数。

<script>
const date_time1 = new Date('December 02, 2022 04:02:31').getTime();
const date_time2 = new Date('December 21, 2022 02:02:13').getTime();
const diff_time = date_time2.getTime() - date_time1.getTime();
</script>

步骤 3：将时间转换为所需的格式。

以下方法将时间转换为特定格式。

<script>
const diff_time = date_time2.getTime() - date_time1.getTime();
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
</script>

步骤 4：显示结果

结果显示在下面的代码中 id="demovalue" 处。

document.getElementById("demovalue ").innerHTML = days_data + "days " 
+ hours_data + "hours " + minutes_data + "minutes" + seconds_data + "second ";

步骤 5：如果倒计时已结束，则显示某些文本。

如果倒计时器时间到期，屏幕上将显示“已过期”一词。

var int_val = setInterval(function() {
  const diff_time = date_time2.getTime() - date_time1.getTime();
if (diff_time < 0) {
        clearInterval(int_val);
        document.getElementById("demo_value").innerHTML = "Time Expired";      
}, 550);

示例

给出的示例使用不同的函数显示了 JavaScript 倒计时器。

示例 1

倒计时器使用 JavaScript 显示不同时间跨度的时间。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: left;
  font-size: 20px;
  margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2022 04:02:31').getTime();
//display end time
const date_time2 = new Date('December 21, 2022 02:02:13').getTime();
//show the difference between the start and end time
const time_var = date_time2 - date_time1;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer 
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
</script>
</body>
</html>

输出

图片显示输出下方的倒计时器。

示例 2

倒计时器使用 JavaScript 以秒为单位显示时间。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: left;
  font-size: 20px;
  margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id="demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2023 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 =  new Date().getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer 
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
}, 500);
</script>
</body>
</html>

输出

图片显示输出下方的倒计时器。

Example3

倒计时器使用 JavaScript 显示已过期的时间。如果时间已过期且两个时间之间的差值小于零或为负数，则倒计时器显示已过期的评论。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: left;
  font-size: 20px;
  margin-top: -5px;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2021 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 =  new Date().getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer 
document.getElementById("demo_value").innerHTML = days_data + "days: " + hours_data + "hours: " + minutes_data + "minutes: " + seconds_data + "second ";
 // If the countdown is expired or takes too much time, write some text 
  if (time_var < 0) {
    clearInterval(f_fun);  document.getElementById("demo_value").innerHTML = "TIME EXPIRED";
  }
}, 5);
</script>
</body>
</html>

输出

图片显示输出下方的倒计时器。

Example4

倒计时器使用 JavaScript 和 CSS 样式显示时间。CSS 样式用于根据用户要求显示计时器。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: left;
  font-size: 20px;
  margin-top: -5px;
}
#clocks > div{
    padding: 12px;
    border-radius: 5px;
    background: grey;
    display: inline-block;
    color: white;
    text-align: center;
}
#clocks div > span{
    padding: 20px;
    border-radius: 5px;
    background: lightgray;
    display: inline-block;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<div id="clocks">
  <div>
    <span class="days_value" id="day_value"></span>
    <div class="small">Days</div>
  </div>
  <div>
    <span class="hours_value" id="hour_value"></span>
    <div class="small">Hours</div>
  </div>
  <div>
    <span class="minutes_value" id="minute_value"></span>
    <div class="small">Minutes</div>
  </div>
  <div>
    <span class="seconds_value" id="second_value"></span>
    <div class="small">Seconds</div>
  </div>
</div>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 02, 2023 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 =  new Date().getTime();
//show the difference between start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer 
document.getElementById("day_value").innerHTML = days_data;
document.getElementById("hour_value").innerHTML = hours_data;
document.getElementById("minute_value").innerHTML = minutes_data;
document.getElementById("second_value").innerHTML = seconds_data;
 }, 5);
</script>
</body>
</html>

输出

图片显示输出下方的倒计时器。

示例 5

倒计时器使用 JavaScript 和 CSS 样式显示已过期的状态。倒计时器在设置零时间时显示已过期的评论。

<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
p {
  text-align: left;
  font-size: 20px;
  margin-top: -5px;
}
#clocks > div{
    padding: 12px;
    border-radius: 5px;
    background: grey;
    display: inline-block;
    color: white;
    text-align: center;
}
#clocks div > span{
    padding: 20px;
    border-radius: 5px;
    background: lightgray;
    display: inline-block;
}
</style>
</head>
<body>
<h3> JavaScript Countdown Timer </h3>
<div id="clocks">
  <div>
    <span class="days_value" id="day_value"></span>
    <div class="small">Days</div>
  </div>
  <div>
    <span class="hours_value" id="hour_value"></span>
    <div class="small">Hours</div>
  </div>
  <div>
    <span class="minutes_value" id="minute_value"></span>
    <div class="small">Minutes</div>
  </div>
  <div>
    <span class="seconds_value" id="second_value"></span> 
    <div class="small">Seconds</div>
  </div>
</div>
<br>
<p id = "demo_value"></p>
<script>
//display start time
const date_time1 = new Date('December 03, 2022 04:02:31').getTime();
var f_fun = setInterval(function() {
//display end time
const date_time2 =  new Date('December 04, 2023 04:02:31').getTime();
//show the difference between the start and end time
const time_var = date_time1 - date_time2;
//convert difference time in days
const days_data = Math.floor(time_var / (1000 * 60 * 60 * 24));
//convert difference time in hours
const hours_data = Math.floor((time_var % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
//convert difference time in minutes
const minutes_data = Math.floor((time_var % (1000 * 60 * 60)) / (1000 * 60));
//convert difference time in the second
const seconds_data = Math.floor((time_var % (1000 * 60)) / 1000);
//display countdown timer 
document.getElementById("day_value").innerHTML = days_data;
document.getElementById("hour_value").innerHTML = hours_data;
document.getElementById("minute_value").innerHTML = minutes_data;
document.getElementById("second_value").innerHTML = seconds_data;
 // If the countdown is expired or takes too much time, write some text 
  if (time_var < 0) {
    clearInterval(f_fun);  
document.getElementById("demo_value").innerHTML = "TIME EXPIRED";
document.getElementById("day_value").innerHTML = '0';
document.getElementById("hour_value").innerHTML = '0';
document.getElementById("minute_value").innerHTML = '0';
document.getElementById("second_value").innerHTML = '0';
  }
}, 5);
</script>
</body>
</html>

输出

图片显示输出下方的倒计时器。

倒计时器的用途

用于指示事件开始前剩余多少时间。
由电子商务公司使用，以指示促销活动仍在进行多久。
网站在进行促销活动时使用此功能。
用于足球比赛、赛车比赛等。
用于指示拍卖网站上设置出价的剩余时间。

使用 JavaScript 创建倒计时器的优点

由于没有依赖项，代码将很小。
由于不需要加载外部脚本和样式文件，网站将运行得更有效率。
用户创建的时钟可以精确地按照他想要的方式工作，而不是试图将插件塑造成他想要的样子，这让他拥有了更多的控制权。

结论

JavaScript 倒计时器显示天、小时、分钟和秒的详细时间差。对于大型编码和迭代时间应用程序来说，这是一个简单易用的功能。

下一个主题使用 JavaScript 检测或检查大写锁定键的开启或关闭状态

← 上一个下一个 →

创建 JavaScript 倒计时计时器

倒计时器的基本原理

示例

倒计时器的用途

使用 JavaScript 创建倒计时器的优点

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

创建 JavaScript 倒计时计时器

倒计时器的基本原理

示例

倒计时器的用途

使用 JavaScript 创建倒计时器的优点

结论

相关帖子

Vanilla JavaScript 是什么？

如何从数组中选取随机元素

JavaScript onbeforeunload 事件

CanvasJS

JavaScript 中的浅拷贝

JavaScript 计算器

如何计算 JavaScript 中的数字阶乘

JavaScript 工厂函数

Javascript getModifierState() KeyboardEvent 方法

Npm uninstall 命令

订阅 Tpoint Tech

联系信息