JS实现HTML页面中动态显示当前时间完整示例

2023年5月27日下午1:36 • JavaScript

JS可以通过调用内置的Date对象，来实现在HTML页面中动态显示当前时间，步骤如下：

HTML部分

首先需要在HTML页面中准备好用来显示动态时间的元素，可以是<div>、<p>或<span>等，例如：

<body>
  <p id="time"></p>
</body>

JavaScript部分

接下来需要写JavaScript代码来完成动态显示时间的操作。

首先，需要使用setInterval()函数，定时更新时间的显示。该函数的第一个参数是一个回调函数，第二个参数是定时器的时间间隔（单位为毫秒），例如：

setInterval(updateTime, 1000); // 每秒更新一次时间

然后，回调函数updateTime()中需要获取当前时间，并将其添加到HTML元素中。获取当前时间可以使用Date()对象的getHours()、getMinutes()和getSeconds()方法。例如：

function updateTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // 在HTML元素中显示时间
  document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
}

为了使时间显示更美观，可以在数字前面补0。例如：

function padZero(num) {
  if (num < 10) {
    return "0" + num;
  }
  return num;
}

function updateTime() {
  var now = new Date();
  var hours = padZero(now.getHours());
  var minutes = padZero(now.getMinutes());
  var seconds = padZero(now.getSeconds());

  // 在HTML元素中显示时间
  document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
}

示例1：使用定时器每秒钟更新时间

<body>
  <p id="time"></p>

  <script>
    function padZero(num) {
      if (num < 10) {
        return "0" + num;
      }
      return num;
    }

    function updateTime() {
      var now = new Date();
      var hours = padZero(now.getHours());
      var minutes = padZero(now.getMinutes());
      var seconds = padZero(now.getSeconds());

      document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
    }

    setInterval(updateTime, 1000);
  </script>

</body>

这个示例中，使用定时器每隔1秒钟更新一次时间，更新后的时间以“小时：分钟：秒钟”（例如“14:23:30”）的格式显示在<p>元素中。

示例2：在标题栏中显示动态时间

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title id="title">Dynamic Time</title>
  <script>
    function padZero(num) {
      if (num < 10) {
        return "0" + num;
      }
      return num;
    }

    function updateTime() {
      var now = new Date();
      var hours = padZero(now.getHours());
      var minutes = padZero(now.getMinutes());
      var seconds = padZero(now.getSeconds());

      document.title = hours + ":" + minutes + ":" + seconds + " - Dynamic Time";
    }

    setInterval(updateTime, 1000);
  </script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

在这个示例中，将动态时间显示在标题栏中。与示例1不同的是，将时间拼接在标题中，以便在多个选项卡中轻松区分该页面的时间。时间显示格式为“小时：分钟：秒钟 - Dynamic Time”，其中“Dynamic Time”是页面的标题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现HTML页面中动态显示当前时间完整示例 - Python技术站