在 JavaScript 中获取当前时间

Sahil Bhosale 2023年1月30日 2021年4月29日

JavaScript JavaScript DateTime

使用 JavaScript 中的 Date 对象获取当前时间
在 JavaScript 中以 UTC 格式获取当前时间
在 JavaScript 中以本地格式获取整个当前时间

有时候，你可能希望在网站上显示当前日期或时间，例如，当你创建要向用户显示当前时间的网络应用程序（如数字时钟）时。可以借助 JavaScript 语言提供的 Date 对象轻松完成此操作。

使用 JavaScript 中的 `Date` 对象获取当前时间

JavaScript 中的 Date 对象使我们可以处理日期和时间。使用此对象，我们可以手动设置时间，然后获取它或获取有关当前时间的数据。以下是一些我们可以用来获取 JavaScript 时间的方法。

方法	目的
`getHours()`	它根据通用时间（0-23）返回小时
`getMinutes()`	它根据通用时间（0-59）返回分钟
`getSeconds()`	它根据通用时间（0-59）返回秒

让我们尝试在下面的代码示例的帮助下理解这一点。下面的程序将在浏览器上显示当前时间。我们都知道时间由三部分组成，小时、分钟和秒。为了获取这些数据，我们在 JavaScript 中提供了不同的方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="displayHours"></p>
      <p id="displayMinutes"></p>
      <p id="displaySeconds"></p>


    <script>

      var displayHours = document.getElementById('displayHours');
      var displayMinutes = document.getElementById('displayMinutes');
      var displaySeconds = document.getElementById('displaySeconds');

      var currentTime = new Date();

      displayHours.innerHTML = currentTime.getHours() + " hrs";
      displayMinutes.innerHTML = currentTime.getMinutes() + " min";
      displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
          
    </script>
    
  </body>
</html>

输出：

22 hrs
56 min
19 sec

为了在网页上显示这三样东西，我们将使用 3 个段落标签。每个标签都有一个与之相关的 id。使用此 id，我们将能够使用 document.getElementById() 方法访问 JavaScript 程序中的这些 HTML 元素。之后，我们将这些 HTML 标签中的每一个都存储在变量中，它们的名称分别为 displayHours、displayMinutes 和 displaySeconds。

要获取当前时间，我们必须将 Date 对象称为构造函数（注意，那里有一个 new 关键字）。这个 Date 对象将返回一个数字，该数字将存储在 currentTime 变量中。现在，currentTime 变量包含整个时间（小时、分钟和秒）。

我们有当前时间和 3 段标签，借助它们，我们将在浏览器上显示时间。要获取小时、分钟和秒等各个字段，我们将分别在 currentTime 变量上使用 getHours()、getMinutes() 和 getSeconds() 方法。使用 innerHTML 属性，我们可以将这些单独的字段分配给每个段落标签。如果你在上述浏览器中以 HTML 文档的形式执行上述代码，你将在浏览器窗口中获得当前时间作为输出。

由于此程序将基于我们的计算机显示当前本地时间，因此上述输出可能会根据你执行上述代码的时间而有所不同。

如果你希望使用时间格式（GMT、UTC、IST 等）和日期来表示整个时间，则可以使用 innerHTML 属性将 currentTime 变量直接分配给段落标签，如下所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime;
          
    </script>
    
  </body>
</html>

输出：

Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)

在 JavaScript 中以 UTC 格式获取当前时间

有多种方法可以帮助你获得通用时间坐标（UTC）格式的时间。这些方法的工作方式几乎与上述方法相同。

下面列出了一些方法，这些方法将为你提供 UTC 格式的时间。

方法	目的
`getUTCHours()`	它以通用时间格式（0-23）返回小时值
`getUTCMinutes()`	它以通用时间格式（0-59）返回分钟值
`getUTCSeconds()`	它以通用时间格式返回秒值（0-59）

在 JavaScript 中以本地格式获取整个当前时间

我们看到的方法仅返回特定时间的一部分，或者仅返回小时，分钟或秒，而不返回整个时间本身。因此，要以本地格式获取整个当前时间，我们可以使用名为 toLocaleTimeString() 的方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime.toLocaleTimeString();
          
    </script>
    
  </body>
</html>

输出：

11:43:06 PM

Author: Sahil Bhosale

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

使用 JavaScript 中的 Date 对象获取当前时间

在 JavaScript 中以 UTC 格式获取当前时间

在 JavaScript 中以本地格式获取整个当前时间

相关文章 - JavaScript DateTime

使用 JavaScript 中的 `Date` 对象获取当前时间