使用 HTML、CSS 和 JS 的简单倒数计时器(1)

JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。

在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。

❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️

• • 🍰 在线演示

  • 🎯 第 1 步：倒数计时器的基本结构

  • 🥇 第 2 步：使用 CSS 代码完善整体样式

  • 🏆 第 3 步：调节各部分元素的布局

  • 🍖 第 4 步：使用 JavaScript 代码激活它

  • 🛬 wuhu ! 起飞 !

  • 🎡 完整源码下载

🍰 在线演示

---

演示地址：https://haiyong.site/tools/daojishi

你可以尝试它的现场演示以了解它是如何工作的。如果你知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。

正如您在上图中所看到的，我在这里使用了一张背景图。该页面包含四个小框，分别表示天、小时、分钟和秒。首先，你必须创建一个 HTML 和 CSS 文件。

🎯 第 1 步：倒数计时器的基本结构

---

这里我使用了一行<h5>标题，一个<form>表单和两个段落<p>还有一个pickedTime <div>用来显示剩余时间。然后我使用下面的 css 代码设计了网页body的样式。我使用了自己库存的一张图片作为背景图，你也可以使用任何其他您想要的颜色或者图片。

HTML

<div class="container">

	<h5>添加日期</h5>

	<form id="addDate">

		<input type="date" name="date" id="date">

		<input type="time" name="time" id="time">

		<button type="submit">提交</button>

	</form>

	<p class="hidd