在 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