如何在JavaScript中獲取當前日期和時間?


本教程將教我們如何在JavaScript中獲取**日期**和**時間**。如今,JavaScript是最流行的程式語言,用於使用者與瀏覽器的互動。可以說,很難找到一個不使用JavaScript的Web應用程式。

建立本教程的目的是讓程式設計師熟悉**Date()**物件。使用者可以使用**日期類**獲取今天的日期和當前時間。在開發應用程式時,程式設計師可能需要根據使用者的本地時區顯示當前日期和時間,我們可以使用日期類來滿足此需求。此外,有時我們需要將使用者的會話開始和結束時間儲存在我們的應用程式資料庫中。

為了解決所有問題,我們只需建立一個日期類的物件,並使用其各種方法在本教程中獲取當前日期和時間。

  • 使用Date物件獲取日期和時間

  • 使用toLocaleString()方法獲取日期和時間

使用Date物件獲取日期和時間

**Date 類**包含幾種方法;我們可以使用它們來獲取當前的**日期、星期幾**和**時間**。此外,它還包含數百種不同的方法,程式設計師可以根據自己的需求使用。

語法

使用者可以遵循以下語法使用不同的方法:

let newDate = new Date(); // create the new object of the date class
  • 使用以下語法,使用者可以獲取年份、月份和日期。

let year = newDate.getFullYear(); // returns the current year
let month = newDate.getMonth(); // returns month between 0 to 11. Users need to add +1 to the returned value to get current month.
let todaySDate = newDate.getDate() // returns today’s date.
  • 使用以下語法,使用者可以獲取小時、分鐘和秒。

let hours = newDate.getHours(); //returns the current hours of the day
let minutes = newDate().getMinutes(); // returns the current minutes of hours
let seconds = newDate.getSeconds(); // returns current the seconds of minutes

示例

下面的示例說明了如何使用上述方法從Date 物件獲取日期和時間。此外,我們還向月份的返回值添加了 +1,因為它返回的值介於 0 和 11 之間。

<html>
<head>
   <title>Get date and time in JavaScript.</title>
</head>
<body>
   <h2>Get date and time using JavaScript.</h2>
   <h4>Output after using the basic methods of the Date() class.</h4>
   <div id="date"> </div>
   <div id="time"> </div>
   <script type="text/javascript">
      let date = document.getElementById("date");
      let time = document.getElementById("time");
      // creating the date object and getting the date and time
      let newDate = new Date();
      let year = newDate.getFullYear();
      let month = newDate.getMonth();
      let todaySDate = newDate.getDate();
      let hours = newDate.getHours();
      let minutes = newDate.getMinutes();
      let seconds = newDate.getSeconds();
      date.innerHTML = " " + todaySDate + "/ " + month + "/ " + year;
      time.innerHTML = hours + ": " + minutes + ": " + seconds;
   </script>
</body>
</html>

在上面的輸出中,使用者可以看到我們正在根據本地時區獲取當前日期和時間。

使用toLocaleString()方法獲取日期和時間

在這種方法中,我們將像上面方法一樣使用Date物件,但是在這裡我們將使用不同的高階方法。我們將使用toLocaleString()方法。它接受兩個引數,一個是區域設定,另一個是選項。區域設定表示您要獲取資料的本地區域或區域,選項是包含許多屬性的物件。

語法

使用者可以遵循以下語法來使用高階資料物件方法:

let date = new Date();
let dateAndTime = date.toLocaleString(); // returns the date and time both.
let date = date.toLocaleDateString(); // returns the date only.
let time = date.toLocaleTimeString(); // returns the time only.
  • 如果使用者想要獲取任何本地區域的日期和時間,可以遵循以下語法。

let options = {
   year: ‘numeric’,
   month: ‘long’,
   day: ‘numeric’,
   weekday: ‘long’,
}
let date = date.toLocaleString( locale, options);

引數

  • locale − locale引數表示本地區域的Unicode。如果您想獲取印度的當前日期和時間,則應傳入“en-IN”,對於美國使用者,可以傳入“en-US”。

  • options − options可以包含許多屬性來格式化日期和時間。例如,在上面的語法中,我們寫的是以數字格式返回年份和日期,並以長格式返回星期幾和月份。

示例

下面的示例演示瞭如何使用toLocaleString()方法來獲取任何特定區域的日期和時間。

<html>
<head>
   <title>Get date and time in JavaScript.</title>
</head>
<body>
   <h4>Output after using toLocaleString() Method.</h4>
   <div id="dateAndTime"> </div>
   <h4> Output after using toLocaleDateString() Method.</h4>
   <div id="date"> </div>
   <h4> Output after using toLocaleTimeString() Method. </h4>
   <div id="time"> </div>
   <h4> Output after using toLocaleString() Method with locale 'en-IN'. </h4>
   <div id="dateIN"> </div>
   <h4> Output after using toLocaleString() Method with local 'en-US'. </h4>
   <div id="dateUs"> </div>
   <script type="text/javascript">
      let dateAndTime = document.getElementById("dateAndTime");
      let date = document.getElementById("date");
      let time = document.getElementById("time");
      let dateIN = document.getElementById("dateIN");
      let dateUs = document.getElementById("dateUs");

      // creating the date object and using the toLocaleString() method
      let newDate = new Date();
      dateAndTime.innerHTML = newDate.toLocaleString();
      date.innerHTML = newDate.toLocaleDateString();
      time.innerHTML = newDate.toLocaleTimeString();

      // options for the toLocaleString() method
      var options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', };
      dateIN.innerHTML = newDate.toLocaleString("en-IN", options);
      dateUs.innerHTML = newDate.toLocaleString("en-US", options);
   </script>
</body>
</html>

在最後兩個輸出中,使用者可以看到我們根據區域獲得了不同的日期格式。

結論

Date 類包含許多高階方法來獲取日期和時間。但是,使用者可以使用內建方法獲取完整的日期和時間字串。

使用者可以使用日期類的各種方法根據自己的需求獲取日期和時間資訊。此外,toLocaleString()方法允許您獲取區域日期和時間。此外,它還允許您透過將options *物件*作為引數傳遞來根據您的需要格式化日期和時間。

更新於:2022年7月20日

9K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.