当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > JavaScript 创建倒计时器

JavaScript 创建倒计时器

JavaScript 创建倒计时器

倒计时器是显示在网页首页的网络或虚拟时钟。它从特定日期开始倒计时，以表示事件的开始或结束。

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

需要注意的是，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>

输出

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

JavaScript 创建倒计时器

示例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>

输出:

该图像显示了输出下面的倒计时计时器。

JavaScript 创建倒计时器

示例3

倒计时计时器使用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>

输出

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

JavaScript 创建倒计时器

示例4

倒计时定时器使用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>

输出：

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

JavaScript 创建倒计时器

示例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倒计时器可以显示天、小时、分钟和秒的时间差详细信息。这是一个适用于大型编码和迭代时间应用的简单功能。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程