JS 时钟|极客笔记

JS 时钟

在网页中加入一个时钟是一种常见的需求，可以让用户实时了解当前的时间。本文将使用 JavaScript 来创建一个简单的时钟，并在网页中展示出来。

HTML 结构

首先，我们需要在 HTML 文件中创建一个容器来放置时钟。我们可以使用一个 div 元素，并给它一个唯一的 id 属性来方便在 JavaScript 中操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 时钟</title>
</head>
<body>

  <div id="clock"></div>

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

CSS 样式

为了美化时钟的样式，我们可以使用 CSS 来添加一些样式。在这里，我们将时钟居中显示，并设置一些基本的样式。

#clock {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
}

JavaScript 代码

接下来，我们将使用 JavaScript 来实现时钟的功能。我们首先需要获取时钟的容器元素，然后在其中插入当前时间。

function updateClock() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  const clockElement = document.getElementById('clock');
  clockElement.textContent = ` ${hours}:$ {minutes}:${seconds}`;
}

setInterval(updateClock, 1000);

在上面的代码中，我们定义了一个名为 updateClock 的函数，它会获取当前的时间，并将时、分、秒显示在时钟容器中。然后，我们使用 setInterval 方法每隔一秒钟调用一次 updateClock 函数，实现时钟的实时更新。