JS 实现倒计时数字时钟效果【附实例代码】

JS 实现倒计时数字时钟效果是一个比较常见的前端特效，本文将为大家分享如何实现这个效果并附上实例代码。以下是完整攻略：

第一步：HTML 基础

首先，我们需要在 HTML 中创建一个数字时钟展示区域，可以选择一个 div 包含一个 h1 标签或者直接使用 h1 标签。具体代码如下：

<div id="countdown-clock">
  <h1 id="countdown-display">00:00:00</h1>
</div>

第二步：CSS 样式

为了显示良好，我们需要为数字时钟展示区域添加一些样式。以下是一个示例 CSS 样式：

#countdown-clock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  width: 100%;
  background-color: #000;
}

#countdown-display {
  font-size: 48px;
  text-align: center;
  color: #fff;
}

这些样式可以根据需求进行自定义。

第三步：JS 实现倒计时

这是实现数字时钟的核心部分。我们需要使用 JavaScript 创建一个倒计时器，同时更新时钟上的数字。以下是实现代码：

// 倒计时目标时间，可以根据需求自定义
var targetTime = new Date("2022-12-31 23:59:00").getTime();

// 更新时钟的函数
function updateClock() {
  var now = new Date().getTime();
  var distance = targetTime - now;

  // 计算出时、分、秒
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 格式化数字，保证时、分、秒都有两位数
  hours = ("0" + hours).slice(-2);
  minutes = ("0" + minutes).slice(-2);
  seconds = ("0" + seconds).slice(-2);

  // 更新时钟展示区域的内容
  var clockDisplay = document.getElementById("countdown-display");
  clockDisplay.innerHTML = hours + ":" + minutes + ":" + seconds;

  // 如果倒计时结束，输出 "倒计时结束！！！"
  if (distance < 0) {
    clearInterval(countdownInterval);
    clockDisplay.innerHTML = "倒计时结束！！！";
  }
}

// 每秒钟更新一次时钟
var countdownInterval = setInterval(updateClock, 1000);

以上代码中，我们首先设置了倒计时的目标时间 targetTime，然后定义了一个更新时钟的函数 updateClock。在这个函数中，我们用 new Date().getTime() 获取了当前时间戳，然后计算出目标时间与当前时间的时差（单位为毫秒）。接下来，我们使用 Math.floor 函数从时差中获取时、分、秒，并使用 slice(-2) 函数格式化数字。最后，我们使用 document.getElementById 获取时钟展示区域的元素，并将该元素的 innerHTML 设置为格式化后的时、分、秒。如果倒计时已经结束，我们清除更新时钟的 interval，并更新时钟展示区域的内容为“倒计时结束！！！”。

第四步：附加功能

除了基本的倒计时功能，我们还可以为数字时钟添加其他有用的功能。下面是两个示例：

示例一：可设置倒计时目标时间

我们可以在 HTML 中添加一个文本框，允许用户输入倒计时的目标时间：

<div id="countdown-clock">
  <h1 id="countdown-display">00:00:00</h1>
  <input id="countdown-input" type="datetime-local">
  <button onclick="setCountdownTime()">设置倒计时</button>
</div>

然后在 JavaScript 中添加一个 setCountdownTime() 函数，将用户输入的时间作为倒计时的目标时间：

function setCountdownTime() {
  var input = document.getElementById("countdown-input").value;
  targetTime = new Date(input).getTime();
}

示例二：倒计时时添加动画效果

我们可以为数字时钟添加动画效果，使其看起来更加炫酷。以下是一个示例 CSS 样式：

#countdown-clock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  width: 100%;
  background-color: #000;
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

#countdown-display {
  font-size: 48px;
  text-align: center;
  color: #fff;
}

这个样式将数字时钟展示区域设置为一个闪烁的“pulse”动画。

至此，JS 实现倒计时数字时钟效果的完整攻略已经分享完毕。希望对您有所帮助。