6种javascript显示当前系统时间代码

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

以下是关于“6种JavaScript显示当前系统时间代码”的详细攻略。

概述

在网页中显示当前系统时间是一项常见的需求，JavaScript提供了多种方法来实现这个目标。本文将介绍6种不同的实现方法，并提供示例代码。

方法1: JavaScript Date对象

JavaScript Date对象是处理日期和时间的常用对象，可以获取当前日期和时间。下面是获取当前时间的示例代码：

let now = new Date();
let time = now.toLocaleTimeString(); // 获取当前时间字符串
document.write("当前时间是：" + time);

运行这个代码，浏览器会输出当前时间，格式类似于“下午7:34:10”。

方法2: JavaScript setInterval函数

JavaScript setInterval函数可以每隔一段时间执行一次指定的代码。我们可以使用这个函数显示当前系统时间，并让它每隔一秒钟更新一次。下面是示例代码：

function showTime() {
  let now = new Date();
  let time = now.toLocaleTimeString();
  document.getElementById("time").innerHTML = "当前时间是：" + time;
}
setInterval(showTime, 1000);

在这个示例中，我们定义了一个名为“showTime”的函数，它负责获取当前时间并更新网页中指定的元素（id为“time”）显示当前时间字符串。然后，我们调用了setInterval函数，让showTime函数每隔1秒钟自动执行一次。

示例:

<!DOCTYPE html>
<html>
<body>
  <p id="time"></p>
  <script>
    function showTime() {
      let now = new Date();
      let time = now.toLocaleTimeString();
      document.getElementById("time").innerHTML = "当前时间是：" + time;
    }
    setInterval(showTime, 1000);
  </script>
</body>
</html>

方法3: JavaScript setTimeout函数

setTimeout函数和setInterval函数类似，但它只会执行一次。我们可以使用setTimeout函数显示当前系统时间，并让它每隔一秒钟更新一次。下面是示例代码：

function showTime() {
  let now = new Date();
  let time = now.toLocaleTimeString();
  document.getElementById("time").innerHTML = "当前时间是：" + time;
  setTimeout(showTime, 1000);
}
showTime();

在这个示例中，我们定义了一个名为“showTime”的函数，它负责获取当前时间并更新网页中指定的元素（id为“time”）显示当前时间字符串。然后，我们调用了setTimeout函数，在1秒钟后再次执行showTime函数，实现了自动更新的效果。

示例:

<!DOCTYPE html>
<html>
<body>
  <p id="time"></p>
  <script>
    function showTime() {
      let now = new Date();
      let time = now.toLocaleTimeString();
      document.getElementById("time").innerHTML = "当前时间是：" + time;
      setTimeout(showTime, 1000);
    }
    showTime();
  </script>
</body>
</html>

方法4: HTML 标签 + JavaScript

我们可以使用HTML标签（如div）和JavaScript代码结合起来显示当前系统时间。下面是示例代码：

<!DOCTYPE html>
<html>
<body>
  <div id="time"></div>
  <script>
    function updateTime() {
      let now = new Date();
      let time = now.toLocaleTimeString();
      document.getElementById("time").innerHTML = "当前时间是：" + time;
    }
    setInterval(updateTime, 1000);
  </script>
</body>
</html>

在这个示例中，我们定义了一个名为“time”的div元素，并在JavaScript代码中使用setInterval函数每隔1秒钟更新该元素的内容为当前时间字符串。

方法5: HTML 标签 + PHP

我们可以使用PHP代码获取服务器的时间，并将其输出到HTML标签中显示。下面是示例代码：

<!DOCTYPE html>
<html>
<body>
  <div id="time">
    <?php echo date("Y-m-d H:i:s"); ?>
  </div>
</body>
</html>

在这个示例中，我们使用PHP的date函数获取当前日期和时间，并将其输出到一个名为“time”的div元素中。

方法6: Moment.js库

Moment.js是一个流行的JavaScript库，可以方便地处理日期和时间。我们可以使用Moment.js库显示当前系统时间。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  <script>
    function updateTime() {
      let time = moment().format("YYYY-MM-DD HH:mm:ss");
      document.getElementById("time").innerHTML = "当前时间是：" + time;
    }
    setInterval(updateTime, 1000);
  </script>
</head>
<body>
  <div id="time"></div>
</body>
</html>

在这个示例中，我们引入Moment.js库，并在JavaScript代码中使用moment函数获取当前时间，并格式化为指定的字符串格式。然后，我们使用setInterval函数每隔1秒钟更新一个名为“time”的div元素的内容为当前时间字符串。