JavaScript 实时时间

JavaScript 是一种广泛使用的编程语言，在 web 开发中也是必不可少的一部分。在 web 页面中，展示实时时间是很常见的需求，本文将介绍如何使用 JavaScript 实现实时时间。

HTML 部分

首先要在 HTML 中加入一个用来展示时间的容器（div），代码如下：

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

JavaScript 部分

接下来就是使用 JavaScript 更新实时时间，具体步骤如下：

步骤一：获取时间

使用 JavaScript 内置对象 Date() 来获取当前时间。

var now = new Date();

步骤二：格式化时间

将获取到的当前时间格式化为需要的时间格式。

var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (hour < 10) hour = "0" + hour;
if (minute < 10) minute = "0" + minute;
if (second < 10) second = "0" + second;
var currentTime = hour + ":" + minute + ":" + second;

步骤三：更新时间

将获取到的格式化后的时间更新到 HTML 中。

document.getElementById("clock").innerHTML = currentTime;

完整代码

最终完整代码如下：

function showTime() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  if (hour < 10) hour = "0" + hour;
  if (minute < 10) minute = "0" + minute;
  if (second < 10) second = "0" + second;
  var currentTime = hour + ":" + minute + ":" + second;
  document.getElementById("clock").innerHTML = currentTime;
  setTimeout(showTime, 1000);
}
showTime();

解析

该代码主要包括两个部分：

• showTime() 函数：该函数用于获取、格式化和更新时间，并且每秒钟调用 setTimeout 定时器。
• setTimeout 定时器：该定时器用于每秒钟调用 showTime() 函数一次。

Markdown 结尾

至此，我们已经完成了使用 JavaScript 实现实时时间的操作。您可以将以上代码复制到 HTML 文件中运行，展现出实时时间。