1. 创建HTML文档结构

首先需要在HTML页面中添加一个用于展示时间的元素，例如使用p（段落）标签来展示当前时间：

<p id="current-time"></p>

在 p 标签上添加 id 为 current-time，为之后的 JavaScript 代码提供数据来源的依据。

2. 编写 JavaScript 代码

接着需要通过 JavaScript 代码来实现获取当前时间和将时间信息同步到页面上的功能，具体代码如下：

// 获取当前时间
function getTime() {
  return new Date().toLocaleTimeString();
}

// 在页面元素上显示时间
function setTime() {
  document.getElementById("current-time").innerText = getTime();
}

// 一秒钟刷新一次时间
setInterval(setTime, 1000);

代码解析：

getTime方法使用Date对象获取当前时间并利用toLocaleTimeString()方法格式化时间为本地时间字符串，然后返回时间字符串；
setTime方法使用document.getElementById获取当前时间元素并设置innerText属性为当前时间字符串；
利用 setInterval 方法每隔一秒钟调用一次 setTime 方法，实时更新时间信息。

3. 运行测试

最后，保存 HTML 文档和 JavaScript 代码文件，运行 HTML 文件，即可在页面上看到实时显示当前时间的效果。

示例1

下面是一个简单的例子，在HTML文件中不使用“id”属性，而是直接在 JavaScript 中创建元素，并将元素添加到 body 标签中。

<!DOCTYPE html>
<html>
  <body>
    <script>
      // 创建新元素
      let p = document.createElement("p");

      // 添加到页面中
      document.body.appendChild(p);

      // 获取当前时间
      function getTime(){
        return new Date().toLocaleTimeString();
      }

      // 更新时间
      function setTime(){
        p.textContent = getTime();
      }

      // 实时刷新时间
      setInterval(setTime, 1000);
    </script>
  </body>
</html>

示例2

下面是另一个例子，在 HTML 文件中，使用 “id” 属性将显示时间的元素指定为一个 p 标签，并将 p 标签的文本内容设置为空。然后，在 JavaScript 代码中，通过 innerText 属性更新 p 标签的文本内容，在每一秒钟之后，更新一次该文本内容。

<!DOCTYPE html>
<html>
  <body>
    <p id="current-time"></p>
    <script>
      // 获取当前时间
      function getTime(){
        return new Date().toLocaleTimeString();
      }

      // 在页面元素上显示时间
      function setTime(){
        document.getElementById("current-time").innerText = getTime();
      }

      // 刷新时间
      setInterval(setTime, 1000);
    </script>
  </body>
</html>

这两个例子都是非常基本的示例，通过学习这些简单的示例，您可以更好地理解如何用 JavaScript 实现页面实时显示当前时间。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现页面实时显示当前时间的简单实例 - Python技术站

JavaScript实现页面实时显示当前时间的简单实例

1. 创建HTML文档结构

2. 编写 JavaScript 代码

3. 运行测试

相关文章