JS简单获取及显示当前时间的方法

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

JS简单获取及显示当前时间的方法可以使用JavaScript中的Date对象。下面是实现该方法的完整步骤：

1. 获取当前时间

在JavaScript中，可以创建一个Date对象，用它来表示当前时间。

let currentDate = new Date();

这个Date对象表示的就是当前时间。如果你想获取特定事件的时间，可以传入相应的日期和时间参数，例如：

// 获取2022年1月1日12:00:00的时间
let specificDate = new Date(2022,0,1,12,0,0);

2. 格式化时间

我们可以用一些方法来把日期转换为特定的字符串格式。

JavaScript中，可以使用Date对象中的方法来获取年、月、日、时、分、秒等信息。

let year = currentDate.getFullYear(); // 年
let month = currentDate.getMonth() + 1; // 月（Month从0开始，所以要加1）
let date = currentDate.getDate(); // 日
let hour = currentDate.getHours(); // 时
let minute = currentDate.getMinutes(); // 分
let second = currentDate.getSeconds(); // 秒

然后，可以使用模板字符串来将这些信息组合成自己想要的格式。

let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;

这里使用了${}语法，它是ES6中的模板字符串语法，可以用来方便地拼接字符串和变量。

3. 显示时间

最后，将时间字符串显示在HTML页面上。可以使用document对象的getElementById方法获取到HTML页面中的元素，然后将时间字符串赋值给元素的innerHTML属性。

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

let timeDivElement = document.getElementById("current-time");
timeDivElement.innerHTML = timeString;

这样，就可以在HTML页面中显示当前时间了。

示例1

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

<!DOCTYPE html>
<html>
  <body>
    <div id="current-time"></div>
    <script>
      let currentDate = new Date();
      let year = currentDate.getFullYear();
      let month = currentDate.getMonth() + 1;
      let date = currentDate.getDate();
      let hour = currentDate.getHours();
      let minute = currentDate.getMinutes();
      let second = currentDate.getSeconds();
      let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      let timeDivElement = document.getElementById("current-time");
      timeDivElement.innerHTML = timeString;
    </script>
  </body>
</html>

示例2

下面是另一个示例代码，用于周期地更新页面上的时间。

<!DOCTYPE html>
<html>
  <body>
    <div id="current-time"></div>
    <script>
      function updateClock() {
        let currentDate = new Date();
        let year = currentDate.getFullYear();
        let month = currentDate.getMonth() + 1;
        let date = currentDate.getDate();
        let hour = currentDate.getHours();
        let minute = currentDate.getMinutes();
        let second = currentDate.getSeconds();
        let timeString = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        let timeDivElement = document.getElementById("current-time");
        timeDivElement.innerHTML = timeString;
      }
      setInterval(updateClock, 1000);
    </script>
  </body>
</html>

这里使用了setInterval方法来周期地更新时间。setInterval方法接受两个参数，第一个参数是要执行的函数，第二个参数是更新时间间隔的毫秒数，这里设置成每秒更新一次。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS简单获取及显示当前时间的方法 - Python技术站