使用 JavaScript 的简单倒计时器

2025-05-25

使用 JavaScript 的简单倒计时器

JavaScript 倒计时器广泛应用于各种电商网站和在建网站，以便用户及时了解最新动态。我们经常在不同类型的电商网站上看到，某种类型的倒计时会在任何产品或优惠上线前的某个时间点开始。
在本文中，我使用简单的 JavaScript 代码创建了一个倒计时器，并分享给大家。

如果你知道如何创建数字时钟，那么创建这样的项目就会容易得多。你可以提前设定一个特定的日期或时间。然后，借助 JavaScript 代码，用该时间减去当前时间，每秒都会进行减法运算。

如上图所示，我在这里使用了网页背景 #90cbf3。该页面包含四个小方框，分别代表天、小时、分钟和秒。首先，您需要创建一个 HTML 和 CSS 文件。

步骤1：倒计时器的基本结构

只用了一行 HTML 代码。然后我使用下面的 CSS 代码设计了网页。background # 90cbf3您可以使用任何其他颜色。



<div id="timer"></div>
Enter fullscreen mode Exit fullscreen mode 


body {
    text-align: center;
    padding: 100px 60px;
    background: #90cbf3;
    font-family: sans-serif;
    font-weight: lighter;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

第 2 步：使用 JavaScript 代码激活它

现在，我已经借助 JavaScript 实现了这个JavaScript 倒计时器。首先，我们借助设置了一个具体的日期Date.parse。也就是说，你必须确定要运行倒计时的时间。



future = Date.parse("jun 12, 2022 01:30:00");
Enter fullscreen mode Exit fullscreen mode

然后使用new Date ()我之前的方法从设备获取当前时间。需要说明的是，这里使用的时间不是任何服务器的时间，而是设备的本地时间。

然后，我从预设时间中减去当前时间，并将其存储在 diff（常量）中。这样，我就得到了倒计时的总时间。



 now = new Date();
 diff = future - now;
Enter fullscreen mode Exit fullscreen mode

现在我已经使用 JavaScript 将倒计时的总时间转换为天、小时、分钟和秒Math.floor。

➤ 我们知道一秒等于 1000 毫秒，所以我们将整个倒计时时间 (diff) 除以by 1000。➤
现在一分钟等于 60 秒，所以在这种情况下我们除以 。➤ 因为一小时等于 60 分钟，所以在这种情况下我们除以by 1000 * 60。➤
一天by 1000 * 60 * 60等于
24 小时，所以在这种情况下我们除以by 1000 * 60 * 60 * 24。



 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);
Enter fullscreen mode Exit fullscreen mode 


 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;
Enter fullscreen mode Exit fullscreen mode

以上我们完成了所有计算工作，现在我们将把它整齐地排列在网页中。为此，我使用了 innerhtml，并在其中对它在网页中的显示方式进行了精美的安排。在这里，我分别使用 span 添加了日期、小时、分钟、秒等文本。



 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
Enter fullscreen mode Exit fullscreen mode

最后，我指示every 1000 milliseconds使用 来更新此计算setInterval。由于倒计时时间每秒都是间歇性的，因此该系统需要每秒更新一次。



setInterval('updateTimer()', 1000);
Enter fullscreen mode Exit fullscreen mode

替代文本

最终的 JavaScript 代码



function updateTimer() {
    future = Date.parse("jun 12, 2022 01:30:00");
 now = new Date();
 diff = future - now;

 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);

 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;

 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
Enter fullscreen mode Exit fullscreen mode

步骤 3：将时间设置为盒子的大小

现在我已经用一些基本的 CSS 代码设计好了它，并把它漂亮地排列在网页中。正如你在上图中所见，每次都有一个小盒子用来容纳它。我使用下面的代码创建了这个盒子。在本例中，我使用了盒子的背景色# 020b43。



#timer {
    font-size: 3em;
    font-weight: 100;
    color: white;
    padding: 20px;
    width: 700px;
    color: white;

}

#timer div {
    display: inline-block;
    min-width: 90px;
    padding: 15px;
    background: #020b43;
    border-radius: 10px;
    border: 2px solid #030d52;
    margin: 15px;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤4：设计文本

现在，最后我将使用 JavaScript 代码中的 span 设计我添加的文本。我使用了以下 CSS 来确定这些文本的大小、颜色等。



#timer div span {
    color: #ffffff;
    display: block;
    margin-top: 15px;
    font-size: .35em;
    font-weight: 400;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

希望您通过本教程学会了如何使用 JavaScript 代码构建倒计时器。请在评论区告诉我您对本教程的评价。如果我有任何错误，也请在评论区指出。

相关文章：

  1. 简单页脚 HTML CSS
  2. 使用 JavaScript 的秒表
  3. JavaScript 年龄计算器
  4. 海得拉巴的寄宿学校
  5. HTML CSS 中的自动图像滑块

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/code_mystery/simple-countdown-timer-using-javascript-1jab
Devto 翻译
PREV
开发人员的冥想指南 - 第 1 部分冥想、编程和您！
NEXT
使用 HTML 和 CSS 的侧边栏菜单