JavaScript 时钟

在本文中，我们将构建一个使用 JavaScript 制作的时钟。我们将使用 HTML、CSS 和 JavaScript 来创建一个能够显示当前时间的时钟。

HTML

首先，我们需要一个显示时间的容器。在这里，我们将使用一个 div 元素和三个 span 元素来分别显示小时、分钟和秒钟。

<div class="clock">
  <span class="hour"></span>
  <span class="minute"></span>
  <span class="second"></span>
</div>

CSS

接下来，我们需要一些 CSS 样式来将时钟放置在页面上并应用样式。

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
}

.clock span:not(:last-child) {
  margin-right: 1rem;
}

JavaScript

我们需要 JavaScript 来更新时钟的时间。我们将为小时、分钟和秒钟分别创建三个不同的函数。

function getTime() {
  const now = new Date();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  return { hour, minute, second };
}

function setHour() {
  const { hour } = getTime();
  const hourElement = document.querySelector('.hour');
  hourElement.textContent = hour < 10 ? `0${hour}:` : `${hour}:`;
}

function setMinute() {
  const { minute } = getTime();
  const minuteElement = document.querySelector('.minute');
  minuteElement.textContent = minute < 10 ? `0${minute}:` : `${minute}:`;
}

function setSecond() {
  const { second } = getTime();
  const secondElement = document.querySelector('.second');
  secondElement.textContent = second < 10 ? `0${second}` : `${second}`;
}

最后，我们将创建一个主函数来更新时钟的每个部分。我们将使用 setInterval 函数每秒调用该函数一次。

function updateClock() {
  setHour();
  setMinute();
  setSecond();
}

setInterval(updateClock, 1000);

完整代码

这里是完整的 HTML、CSS 和 JavaScript 代码来创建一个时钟：

<div class="clock">
  <span class="hour"></span>
  <span class="minute"></span>
  <span class="second"></span>
</div>

<style>
  .clock {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
  }

  .clock span:not(:last-child) {
    margin-right: 1rem;
  }
</style>

<script>
  function getTime() {
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();

    return { hour, minute, second };
  }

  function setHour() {
    const { hour } = getTime();
    const hourElement = document.querySelector('.hour');
    hourElement.textContent = hour < 10 ? `0${hour}:` : `${hour}:`;
  }

  function setMinute() {
    const { minute } = getTime();
    const minuteElement = document.querySelector('.minute');
    minuteElement.textContent = minute < 10 ? `0${minute}:` : `${minute}:`;
  }

  function setSecond() {
    const { second } = getTime();
    const secondElement = document.querySelector('.second');
    secondElement.textContent = second < 10 ? `0${second}` : `${second}`;
  }

  function updateClock() {
    setHour();
    setMinute();
    setSecond();
  }

  setInterval(updateClock, 1000);
</script>

现在我们有一个漂亮的时钟，可以显示当前时间。