JS实时显示当前时间（转载）

引言

在网页开发中，有很多时候我们需要在页面中实时显示当前的时间，比如展示实时的倒计时，或者显示一个动态的时钟等等。使用 JavaScript 可以很方便的实现这样的功能。

在本文中，我们将学习如何使用 JavaScript 实时显示当前时间，并以一个简单的时钟示例来演示。

HTML结构

首先，在你的 HTML 文件中添加一个容器元素，用于显示当前的时间。

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

JS代码

接下来，我们将编写 JavaScript 代码来获取当前的时间，并将其显示在上面创建的容器元素中。

function showTime() {
  var date = new Date(); // 创建Date对象
  var h = date.getHours(); // 获取小时
  var m = date.getMinutes(); // 获取分钟
  var s = date.getSeconds(); // 获取秒钟
  var session = "AM"; // 默认为上午

  // 将小时转换为 12 小时制
  if (h == 0) {
    h = 12;
  }

  // 判断是上午还是下午
  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  // 在钟表上添加 0 前缀（如果需要）
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  // 构建时间字符串
  var time = h + ":" + m + ":" + s + " " + session;

  // 显示时间
  document.getElementById("clock").innerText = time;

  // 每隔 1 秒钟调用一次 showTime 函数
  setTimeout(showTime, 1000);
}

// 启动时钟
showTime();

运行效果

加入以上代码，并打开你的网页，你将会看到一个实时更新的时钟。它将在页面加载后立即开始运行，并每秒钟更新一次。

结语

在本文中，我们学习了如何使用 JavaScript 实时显示当前时间，并以一个简单的时钟示例来演示。希望这篇博客对你理解 JavaScript 实时更新时间的原理有所帮助。

如果你对 JavaScript 的其他应用也感兴趣，可以深入了解这门强大的编程语言，并尝试在你的网页中使用它来增加更多的动态效果。

愿时光永远静好！

本文来自极简博客，作者：指尖流年，转载请注明原文链接：JS实时显示当前时间（转载）