JS使用Date对象实时显示当前系统时间简单示例

下面我会详细讲解如何使用 JavaScript 的 Date 对象实现实时显示当前系统时间的简单示例。

准备工作

在开始之前，我们需要了解 JavaScript 的 Date 对象，该对象用于处理日期和时间，它提供了获取当前时间、设置时间、获取时间戳等方法。

为了演示该功能，我们需要在页面中添加一个用于显示时间的元素，例如：

<div id="time"></div>

接下来，我们可以使用 JavaScript 选择该元素，并保存到变量中，以便我们可以在 JavaScript 中访问它：

const timeDiv = document.getElementById('time');

显示当前时间

为了显示实时时间，我们需要设置一个定时器，每秒钟刷新一次时间。我们可以使用 setInterval 方法来完成。

setInterval(() => {
  const now = new Date();
  timeDiv.innerHTML = now.toLocaleString();
}, 1000);

在上面的代码中，我们使用了 setInterval 方法，该方法每隔 1 秒钟执行一次回调函数。回调函数中，我们使用 Date 对象获取当前时间，并将时间设置为本地时间格式，最后将结果显示到时间元素的 innerHTML 属性中。

如上代码执行后，我们可以在页面上看到实时显示的系统时间。

自定义时间格式

除了上面的方法，我们还可以使用 JavaScript 中的 Intl.DateTimeFormat 对象来实现自定义的时间格式。下面是一个使用该方法实现的示例：

setInterval(() => {
  const now = Date.now();
  const formatter = new Intl.DateTimeFormat('en', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
  });
  timeDiv.innerHTML = formatter.format(now);
}, 1000);

在上面的代码中，我们使用 Date.now() 方法获取当前时间戳，然后使用 Intl.DateTimeFormat 格式化时间。在该对象的第一个参数中，我们指定了语言环境为英文，第二个参数中指定了要显示的时间格式，包括小时、分钟、秒和是否使用 12 小时制。最后，我们将格式化后的时间设置为时间元素的 innerHTML 属性。

使用上面的代码，我们可以实现自定义的时间显示格式。

以上就是使用 JavaScript 的 Date 对象实现实时显示当前系统时间的简单示例的攻略，希望对你有帮助。