使用Javascript在HTML中显示实时时间

2023年5月27日下午12:19 • JavaScript

下面是如何使用Javascript在HTML中显示实时时间的完整攻略：

1. 在HTML中创建一个用于显示时间的元素

首先，在HTML中创建一个<span>元素，用于显示实时时间。

<p>现在的时间是：<span id="time"></span>.</p>

在这里，我们使用了一个<span>元素，并设置了该元素的id为time。这是为了在后续代码中方便获取该元素。

2. 用Javascript获取当前时间，并将其显示在页面上

接下来，在Javascript中获取当前时间，并将其显示在页面上。

function showTime() {
  let now = new Date(); // 获取当前时间
  let hours = now.getHours(); // 获取当前小时数
  let minutes = now.getMinutes(); // 获取当前分钟数
  let seconds = now.getSeconds(); // 获取当前秒数
  let time = hours + ':' + minutes + ':' + seconds; // 格式化时间
  document.getElementById('time').innerHTML = time; // 在页面上显示时间
}

在这里，我们首先定义了一个showTime()函数，在函数中获取当前时间，并格式化好要显示的时间字符串。我们将格式化后的时间字符串，直接设置到之前创建的<span>元素上，这样就可以在页面上实时显示当前时间了。

3. 使用`setInterval()`每秒更新一次时间

最后，我们需要使用Javascript的setInterval()方法，每秒钟更新一次时间。

setInterval(showTime, 1000); // 每秒钟调用一次showTime()函数

在这里，我们使用了setInterval()方法，传入要执行的函数showTime()和时间间隔为1000毫秒（即1秒）。

示例说明

示例1：

下面是一个完整的示例代码，在网页上显示实时时间：

<!DOCTYPE html>
<html>
<head>
  <title>实时时间示例</title>
  <script>
    function showTime() {
      let now = new Date(); // 获取当前时间
      let hours = now.getHours(); // 获取当前小时数
      let minutes = now.getMinutes(); // 获取当前分钟数
      let seconds = now.getSeconds(); // 获取当前秒数
      let time = hours + ':' + minutes + ':' + seconds; // 格式化时间
      document.getElementById('time').innerHTML = time; // 在页面上显示时间
    }

    setInterval(showTime, 1000); // 每秒钟调用一次showTime()函数
  </script>
</head>
<body>
  <p>现在的时间是：<span id="time"></span>.</p>
</body>
</html>

在浏览器中打开该HTML文件，可以看到页面上实时显示当前时间。

示例2：

下面是另一个示例代码，可以实现一个电子时钟的效果，包含了小时、分钟、秒的指针：

<!DOCTYPE html>
<html>
<head>
  <title>电子时钟示例</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border: 5px solid gray;
      border-radius: 50%;
      position: relative;
    }
    .hour-hand, .minute-hand, .second-hand {
      position: absolute;
      width: 0;
      height: 0;
    }
    .hour-hand {
      border-top: 35px solid gray;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      top: 50%;
      left: 50%;
      margin-top: -35px;
      margin-left: -5px;
      transform-origin: bottom center;
    }
    .minute-hand {
      border-top: 70px solid gray;
      border-right: 3px solid transparent;
      border-left: 3px solid transparent;
      top: 50%;
      left: 50%;
      margin-top: -70px;
      margin-left: -3px;
      transform-origin: bottom center;
    }
    .second-hand {
      border-top: 90px solid red;
      border-right: 1px solid transparent;
      border-left: 1px solid transparent;
      top: 50%;
      left: 50%;
      margin-top: -90px;
      margin-left: -1px;
      transform-origin: bottom center;
    }
  </style>
  <script>
    function updateTime() {
      let now = new Date(); // 获取当前时间
      let hours = now.getHours(); // 获取当前小时数
      let minutes = now.getMinutes(); // 获取当前分钟数
      let seconds = now.getSeconds(); // 获取当前秒数

      // 计算时针、分针、秒针的角度
      let hourAngle = (hours % 12) * 30 + (minutes / 60) * 30 + (seconds / 3600) * 30;
      let minuteAngle = minutes * 6 + (seconds / 60) * 6;
      let secondAngle = seconds * 6;

      // 更新指针的角度
      let hourHand = document.querySelector('.hour-hand');
      let minuteHand = document.querySelector('.minute-hand');
      let secondHand = document.querySelector('.second-hand');
      hourHand.style.transform = `rotate(${hourAngle}deg)`;
      minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
      secondHand.style.transform = `rotate(${secondAngle}deg)`;
    }

    setInterval(updateTime, 1000); // 每秒钟更新指针的角度
  </script>
</head>
<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</body>
</html>

在浏览器中打开该HTML文件，可以看到页面上显示一个钟表，包含了时针、分针、秒针，并且实时更新指针的位置，模拟出电子时钟的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Javascript在HTML中显示实时时间 - Python技术站