简洁的 JavaScript 实时显示时间的脚本修正版

目标

本文主要介绍如何使用 JavaScript 语言编写简洁的实时显示时间的脚本。我们的目标是通过代码实现一个时钟功能，可以动态地显示当前的时间。

步骤

第一步：准备 HTML 模板

首先，我们需要一个 HTML 模板，用来显示实时的时间。我们可以在 HTML 文件中添加一个 div 元素，然后通过 JavaScript 代码将实时时间显示在这个 div 元素中。以下是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>实时显示时间的脚本</title>
  </head>
  <body>
    <div id="clock"></div>

    <script>
      // 在这里添加 JavaScript 代码
    </script>
  </body>
</html>

第二步：编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现时钟功能。具体步骤如下：

获取当前时间：我们可以使用 JavaScript 内置的 Date 对象来获取当前的时间。
格式化时间：我们可以通过字符串模板或者分别获取小时、分钟、秒钟等时间组成部分，将当前时间格式化为我们需要的形式。
实时更新时间：我们可以使用 JavaScript 的 setInterval 函数，每秒钟更新一次时间。

以下是一段完整的 JavaScript 代码，实现了实时显示时间的功能：

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

function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const timeString = `${hours}:${minutes}:${seconds}`;

  clock.textContent = timeString;
}

setInterval(updateClock, 1000);

第三步：测试代码

最后，我们需要测试代码是否能够正常工作。我们可以在浏览器中打开我们的 HTML 文件，观察时钟是否能够实时更新显示当前的时间。

示例说明

以下是两个示例，演示了如何将实时时间显示为不同的格式。

示例 1：24小时制

这个示例演示了如何将实时时间显示为 24 小时制。我们只需要将时间字符串模板改为 HH:mm:ss 即可。

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

function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

  clock.textContent = timeString;
}

setInterval(updateClock, 1000);

示例 2：12小时制

这个示例演示了如何将实时时间显示为 12 小时制。我们需要做以下两个修改：

改变时间格式：我们使用了 h 来表示小时数，同时添加了 am 或 pm 来表示上午或下午。
处理小时数：由于要使用 12 小时制，所以需要将小时数进行转换。

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

function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  let hours12 = hours % 12;
  hours12 = hours12 ? hours12 : 12;
  const ampm = hours < 12 ? 'am' : 'pm';

  const timeString = `${String(hours12).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} ${ampm}`;

  clock.textContent = timeString;
}

setInterval(updateClock, 1000);