毫不费劲！只需 CSS 代码就能搞定倒计时效果

2022-12-29 14:39:37

用CSS巧夺天工，轻松实现页面倒计时

简介

在现代网页开发中，倒计时是一个常见的需求。传统的实现方式是使用JavaScript定时器，但随着CSS的不断发展，我们现在可以使用纯CSS来实现倒计时效果，既能简化代码，提高性能，又不会增加页面的复杂度。

步骤详解

1. 创建HTML结构

首先，我们创建了一个包含倒计时的HTML结构：

<div id="countdown">
  <div class="days">00</div>
  <div class="hours">00</div>
  <div class="minutes">00</div>
  <div class="seconds">00</div>
</div>

在这个结构中，包含了四个子元素，分别表示天、时、分和秒。

2. 添加CSS样式

接下来，我们添加CSS样式来设置倒计时的外观和布局：

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #222;
  color: #fff;
  font-size: 2rem;
}

.days, .hours, .minutes, .seconds {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
}

这段样式设置了倒计时的容器为全屏，并将其子元素居中显示，并为其添加了边框和圆角。

3. 添加动画效果

为了让倒计时动起来，我们使用CSS动画来让子元素旋转：

@keyframes countdown {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.days, .hours, .minutes, .seconds {
  animation: countdown 1s linear infinite;
}

这个动画会让子元素以一秒为周期绕Y轴旋转360度。

4. 添加JavaScript代码

最后，我们需要使用JavaScript代码来计算倒计时的值并更新UI：

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

const daysElement = countdown.querySelector(".days");
const hoursElement = countdown.querySelector(".hours");
const minutesElement = countdown.querySelector(".minutes");
const secondsElement = countdown.querySelector(".seconds");

const targetDate = new Date("2023-01-01T00:00:00Z");

const interval = setInterval(() => {
  const now = new Date();
  const timeLeft = targetDate - now;

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

  daysElement.textContent = days < 10 ? "0" + days : days;
  hoursElement.textContent = hours < 10 ? "0" + hours : hours;
  minutesElement.textContent = minutes < 10 ? "0" + minutes : minutes;
  secondsElement.textContent = seconds < 10 ? "0" + seconds : seconds;

  if (timeLeft <= 0) {
    clearInterval(interval);
  }
}, 1000);