在 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` 物件獲取當前時間