JavaScript 30 天编码挑战：第 2 天，让时钟动起来！

2024-02-01 00:46:18

前言

欢迎来到 JavaScript 30 天编码挑战的第 2 天！今天，我们将踏上让时钟动起来的激动人心的旅程。我们将学习如何使用 JavaScript 操纵 DOM 元素来创建动态且交互的时钟。

认识时钟元素

在我们开始编码之前，让我们先了解一下时钟所需的基本 HTML 结构：

<div id="clock">
  <div id="hours">00</div>
  <div id="minutes">00</div>
  <div id="seconds">00</div>
</div>

<div id="clock"> 是时钟容器元素。
<div id="hours">、<div id="minutes"> 和 <div id="seconds"> 是时钟的时、分、秒元素，分别显示小时、分钟和秒。

创建时钟逻辑

现在，我们准备创建让时钟运转起来的 JavaScript 代码：

// 获取时钟元素
const clock = document.getElementById("clock");
const hoursElement = document.getElementById("hours");
const minutesElement = document.getElementById("minutes");
const secondsElement = document.getElementById("seconds");

// 设置时间间隔以每秒更新时钟
setInterval(() => {
  // 获取当前日期和时间
  const date = new Date();

  // 从日期中提取小时、分钟和秒
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 将时间更新到时钟元素
  hoursElement.textContent = hours < 10 ? "0" + hours : hours;
  minutesElement.textContent = minutes < 10 ? "0" + minutes : minutes;
  secondsElement.textContent = seconds < 10 ? "0" + seconds : seconds;
}, 1000);

代码解析

我们首先获取时钟容器元素及其子元素（时、分、秒）。
然后，我们设置一个每秒触发的 setInterval，它将执行以下操作：
- 获取当前日期和时间。
- 从日期中提取小时、分钟和秒。
- 将更新的时间更新到相应的时钟元素。

样式美化

我们的时钟功能齐全，但为了使其看起来美观，让我们添加一些样式：

#clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #eee;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #ccc;
}

#hours, #minutes, #seconds {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 5px;
}