JavaScript页面实时显示当前时间实例代码

下面是JavaScript页面实时显示当前时间的攻略。

前提要求

在编写JavaScript实时显示时间的代码之前，需要了解一些前提知识，包括：

• HTML基础知识和标记语言
• JavaScript基础知识和语法
• Date()对象详解

实时显示当前时间代码步骤

以下是实时显示当前时间的实现步骤：

1. 在HTML文件中创建一个用于显示时间的容器，为其设置一个ID，如下所示：

<div id="clock">12:00:00</div>

1. 在JavaScript文件中获取时间容器，使用setInterval()函数进行定时刷新，格式化时间后更新容器中的时间显示，代码如下：

function displayTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var ampm = (hours >= 12) ? "PM" : "AM";
  hours = (hours > 12) ? hours - 12 : hours;
  hours = (hours == 0) ? 12 : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  var time = hours + ":" + minutes + ":" + seconds + " " + ampm;
  document.getElementById("clock").innerHTML = time;
}
setInterval(displayTime, 1000);

通过获取当前时间和将其格式化为合适的字符串，然后将其设置为容器的innerHTML，从而实现了实时刷新和显示时间的效果。

示例1：使用12小时制

以下示例演示使用12小时制来显示当前时间。首先，需要修改displayTime()函数的部分代码：

function displayTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var ampm = (hours >= 12) ? "PM" : "AM";
  hours = (hours > 12) ? hours - 12 : hours;
  hours = (hours == 0) ? 12 : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  var time = hours + ":" + minutes + ":" + seconds + " " + ampm;
  document.getElementById("clock").innerHTML = time;
}

运行该代码，容器中的时间将会使用12小时制来显示。

示例2：使用24小时制

以下示例演示使用24小时制来显示当前时间。首先，需要修改displayTime()函数的部分代码：

function displayTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  var time = hours + ":" + minutes + ":" + seconds;
  document.getElementById("clock").innerHTML = time;
}

运行该代码，容器中的时间将会使用24小时制来显示。

总结

本攻略简单介绍了如何使用JavaScript来实现页面实时显示当前时间的效果，并提供了两个示例来演示如何使用12小时制和24小时制来显示当前时间。