在 JavaScript 中獲取當前時間

  1. 使用 JavaScript 中的 Date 物件獲取當前時間
  2. 在 JavaScript 中以 UTC 格式獲取當前時間

有時候,你可能希望在網站上顯示當前日期或時間,例如,當你建立要向使用者顯示當前時間的網路應用程式(如數字時鐘)時。可以藉助 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 標籤中的每一個都儲存在變數中,它們的名稱分別為 displayHoursdisplayMinutesdisplaySeconds

要獲取當前時間,我們必須將 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

相關文章 - JavaScript DateTime

  • 如何在 JavaScript 中比較兩個日期
  • JavaScript 獲取當前日期時間