simple-countdown-timer-using-javascript-1jab

原始地址：https://dev.to/code_mystery/simple-countdown-timer-using-javascript-1jab

JavaScript倒计时器用于各种电子商务和正在建设中的网站，以保持用户信息的最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前都会开始一种倒计时。

在本文中，我使用简单的JavaScript代码创建了一个倒计时器，并与您分享。

✅
点击这里查看实时预览 👉👉 JavaScript倒计时器

如果您知道如何创建一个数字时钟，那么创建这样的项目会更容易。在这里，您可以预先安排一个特定的日期或时间。然后，借助JavaScript代码的帮助，从该时间中减去当前时间，这个减法每秒钟减少一次。

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

点击这里查看"倒计时器"的基本结构

第一步：倒计时器的基本结构

只使用了一行HTML编程代码。然后，我使用下面的css代码设计了网页。您可以使用任何其他颜色，背景设置成#90cbf3。

<div id="timer"></div>
body {
  text-align: center;
  padding: 100px 60px;
  background: #90cbf3;
  font-family: sans-serif;
  font-weight: lighter;
}

点击这里查看"激活它使用JavaScript代码"

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

现在我使用JavaScript的帮助来实现这个JavaScript倒计时器。首先，我们使用Date.parse来设置一个特定的日期，即您希望运行倒计时的时间。

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

然后，使用new Date()方法从设备中获取当前时间。在这种情况下，让我告诉您，这里使用的时间不是任何服务器的时间。它只是您设备的本地时间。

然后，我从预先确定的时间中减去当前时间，并将其存储在diff（常数）中。结果就是我得到了倒计时的总时间。

now = new Date();
diff = future - now;

然后，我使用JavaScript的Math.floor将倒计时的总时间转换为天数、小时数、分钟数和秒数。

➤ 我们知道一秒等于1000毫秒，所以我们将整个倒计时时间（diff）除以1000。

➤ 目前一分钟等于60秒，所以在这种情况下我们将其除以1000 * 60。

➤ 由于一小时等于60分钟，所以在这种情况下我们将其除以1000 * 60 * 60。

➤ 一天等于24小时，所以在这种情况下它被除以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);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;

以上是我们进行计算的所有工作，现在我们将其整齐地排列在网页中。为此，我使用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>';

最后，我指示每1000毫秒更新一次此计算，使用setInterval。因为倒计时时间每秒都会间断，所以这个系统需要每秒更新一次。

setInterval('updateTimer()', 1000);

点击这里查看"最终的JavaScript代码"

最终的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);

点击这里查看"将时间设置为盒子的大小"

第三步：将时间设置为盒子的大小

现在我使用一些基本的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;
}

点击这里查看"设计文本"

第四步：设计文本

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

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

希望从本教程中您学会了如何使用JavaScript代码构建倒计时器。请在评论中让我知道您对本教程的喜欢程度。如果我有任何错误，请在评论中告诉我。

相关文章:

最佳页脚设计HTML CSS
JavaScript待办事项列表
使用JavaScript的简单秒表
骨架屏加载动画
JavaScript年龄计算器
JavaScript密码生成器

Html CSS自动图像幻灯片

使用HTML CSS的侧边栏菜单

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