原生js实现节日时间倒计时功能

对于网站开发者来说，实现节日倒计时功能是一个很有趣的项目。下面是实现节日时间倒计时功能的完整攻略：

1. HTML 结构

<p id="countdown"></p>

在 HTML 中建立一个计时器的 DOM 元素，在本例中是一个段落元素，被赋予 ID 为 countdown。

2. JavaScript 代码

• 创建指定的日期时间对象，并使用 Date.now() 获取当前时间，以毫秒为单位。

const countdown = document.getElementById('countdown');

const holidayDate = new Date('January 1, 2022 00:00:00').getTime();
const today = Date.now();

• 用户需要知道剩余的时间。计算两个日期时间对象之间的差值，并将结果显示在页面上。

const difference = holidayDate - today;

// 分别计算天、小时、分钟和秒
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);

// 更新页面
countdown.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

在这个示例中，倒计时只考虑天数、小时、分和秒。首先通过差值计算天数，并将余数存储下来。然后用相同的方法计算小时、分钟和秒，通过模运算计算余数。最后更新页面。

• 创建一个计时器函数，每秒调用一次该函数

setInterval(() => {
  const holidayDate = new Date('January 1, 2022 00:00:00').getTime();
  const today = Date.now();
  const difference = holidayDate - today;

  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  countdown.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
}, 1000);

本例中，setInterval() 每 1000 毫秒调用一次匿名函数。在匿名函数中，代码计算日期和差值，更新 DOM 中的倒计时，并将其显示为字符串。

示例说明

下面是两条针对方法2中的示例说明。

• 示例1：实现跨年倒计时

假设希望在跨年期间向网站添加倒计时功能。原本的代码是在以下情况下执行的：

const holidayDate = new Date('January 1, 2022 00:00:00').getTime();

可以将代码中的“January 1, 2022 00:00:00”替换为当前年份的新年倒计时日期。也可以使用从数据源或 API 获得的值来动态加载日期。

• 示例2：添加样式和格式

默认情况下，倒计时不具备任何样式和格式。可以添加样式以使其与网站完美融合。比如：

#countdown {
  display: inline-block;
  font-size: 2rem;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: lightgray;
}

在这个例子中，我们为倒计时元素创建了样式，并将其设置为灰色背景。根据需要进行更改。