和技术说早安 | 用代码和你一起跨年，用设计和你一起送旧迎新

2023-11-21 15:03:06

跨越2022，迎接2023：用代码和设计打造独特的跨年倒计时

在2022年即将过去、2023年即将到来之际，让我们用代码和设计携手打造一个独一无二的跨年倒计时，向旧年告别，迎接新年。

用HTML搭建框架

首先，在index.html文件中使用HTML来创建跨年倒计时的基本框架。包括容器、时钟和时、分、秒元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="clock">
      <div class="hours"></div>
      <div class="minutes"></div>
      <div class="seconds"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

用CSS点缀风格

在style.css文件中，用CSS为跨年倒计时添加美感。设置背景颜色、字体、时钟大小和颜色等样式。

body {
  background-color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  text-align: center;
  margin: 100px auto;
}

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.hours, .minutes, .seconds {
  font-size: 100px;
  font-weight: bold;
  margin: 0 20px;
}

.hours {
  color: #ff0000;
}

.minutes {
  color: #00ff00;
}

.seconds {
  color: #0000ff;
}

用JS驱动倒计时

在script.js文件中，用JS让跨年倒计时动起来。获取时钟元素，设置目标时间，并每秒更新时、分、秒。

// 获取时间元素
const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');

// 设置倒计时时间
const targetDate = new Date('January 1, 2023 00:00:00').getTime();

// 更新倒计时
function updateTime() {
  // 计算距离目标时间的毫秒数
  const now = new Date().getTime();
  const timeLeft = targetDate - now;

  // 计算小时、分钟、秒数
  const hoursLeft = Math.floor(timeLeft / (1000 * 60 * 60));
  const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);

  // 更新时间元素
  hours.textContent = hoursLeft;
  minutes.textContent = minutesLeft;
  seconds.textContent = secondsLeft;

  // 每秒执行一次updateTime函数
  setTimeout(updateTime, 1000);
}

// 启动倒计时
updateTime();