如何使用 JavaScript 向日期新增小時和分鐘？

在本教程中，我們將學習如何使用 JavaScript 向日期新增小時和分鐘。我們有多種方法可以實現這一點，如下所示。

  • 使用 setHours() 方法新增小時。

  • 使用 setMinutes() 方法新增分鐘。

  • 使用 getTime() 方法新增小時或分鐘。

使用 setHours 方法新增小時

JavaScript 日期setHours()方法根據本地時間設定指定日期的小時。

語法

以下是將 setHours() 方法應用於向日期新增小時的語法：

Date.setHours(hours, minutes, seconds, ms)

注意 - 除第一個引數外，其他引數始終是可選的。

引數

  • hours - 一個介於 0 和 23 之間的整數，表示小時。

  • minutes - 一個介於 0 和 59 之間的整數，表示分鐘。

  • seconds - 一個介於 0 和 59 之間的整數，表示秒。如果指定了 seconds 引數，則還必須指定 minutes。

  • ms - 一個介於 0 和 999 之間的數字，表示毫秒。如果指定了 ms 引數，則還必須指定 minutes 和 seconds。

方法

要使用 setHours() 方法將小時新增到 Date 物件中，我們首先獲取當前時間的小時值，然後將小時數新增到其中，並將新增後的值傳遞給 setHours() 方法。

示例

在這個示例中，我們向當前時間新增 2 小時。

<html>
<head>
   <title>Example – add hours to date in JavaScript</title>
</head>
<body>
   <h2> Add 2 hours to the JavaScript Date object using setHours( ) method </h2>
   <p> Click on the button to add 2 Hours to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime">Updated Time: </p>
</body>
<script>
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString()}, 1000)
   
   // Code to add 2 hours to current Time
   let ut = document.getElementById("updatedTime")
   function add() {
      setInterval(() => {
         let dt = new Date();
         dt.setHours(dt.getHours() + 2);
         ut.innerText = "Updated Time : " + dt.toLocaleTimeString(); 
      }, 1000)
   }
</script>
</html>

使用 setMinutes() 方法新增分鐘

日期物件的setMinutes()函式接受一個表示分鐘的整數，並用它替換當前日期中分鐘的值。

語法

以下是使用 setMinutes() 方法新增分鐘的語法：

Date.setMinutes(minutes, seconds , ms );

注意 - 除第一個引數外，其他引數始終是可選的。

引數

  • minutes - 它是一個介於 0 和 59 之間的整數，表示分鐘。

  • seconds - 它是一個介於 0 和 59 之間的整數，表示秒。如果指定了 seconds 引數，則還必須指定 minutes。

  • ms - 一個介於 0 和 999 之間的數字，表示毫秒。如果指定了 ms 引數，則還必須指定 minutes 和 seconds。

方法

要使用 setMinutes() 方法將分鐘數新增到 Date 物件中，我們首先使用 getMinutes() 方法獲取當前時間的分值，然後將所需的分鐘數新增到其中，並將新增後的值傳遞給 setMinutes() 方法。

示例

在這個示例中，我們向當前時間新增 30 分鐘。

<html>
<head>
   <title>Example – add minutes to the date</title>
</head>
<body>
   <h2> Add 30 minutes to the JavaScript Date object using setMinutes( ) method </h2>
   <p> Click on the button to add 30 minutes to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime">Updated Time: </p>
</body>

<script>
   
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString() }, 1000)

   // Code to add 30 minutes to current Time
   let ut = document.getElementById("updatedTime")
   function add() {
      setInterval(() => {
      let dt = new Date();
      dt.setMinutes(dt.getMinutes() + 30)
      ut.innerText = "Updated Time : " + dt.toLocaleTimeString(); }, 1000)
   }
</script>
</html>

使用 getTime() 方法新增小時或分鐘

我們可以應用getTime()方法向 JavaScript Date 物件新增小時或分鐘。此方法的語法如下。

語法

Date.getTime()

方法

要將分鐘數或小時數新增到 Date 物件中，首先，我們使用 Date.getTime() 方法獲取當前時間，然後將我們所需新增時間的毫秒值新增到其中，並將新增後的值傳遞給 Date 物件。

示例

在這個示例中，我們使用 getTime() 方法向當前時間新增 30 分鐘和 2 小時。

<html>
<head>
   <title>Example – add hours or minutes to JavaScript Date object</title>
</head>
<body>
   <h2> Add 30 minutes and 2 hours to the JavaScript Date object using getTime( ) method </h2>
   <p> Click on the button to add 30 minutes and 2 hours to the current date/time.</p>
   <button onclick="add()">Click Me</button>
   <p id="currentTime">Current Time : </p>
   <p id="updatedTime1">Updated Time (Adding 30 minutes): </p>
   <p id="updatedTime2">Updated Time (Adding 2 hours): </p>
</body>

<script>
   
   // Code the show current time
   let ct = document.getElementById("currentTime")
   setInterval(() => {
      let currentTime = new Date().getTime();
      ct.innerText = "Current Time : " + new Date(currentTime).toLocaleTimeString() }, 1000)

   // Code to add 30 minutes and 2 hours to current Time
   let ut1 = document.getElementById("updatedTime1")
   let ut2 = document.getElementById("updatedTime2")

   function add() {
      setInterval(() => {
         
         // Adding 30 minutes
         let dt1 = new Date();
         dt1 = new Date(dt1.getTime() + 30 * 60 * 1000)
         ut1.innerText = "Updated Time (Adding 30 minutes) : " + dt1.toLocaleTimeString();
   
         // Adding 2 hours
         let dt2 = new Date();
         dt2 = new Date(dt2.getTime() + 2 * 60 * 60 * 1000)
         ut2.innerText = "Updated Time (Adding 2 hours) : " + dt2.toLocaleTimeString(); 
      }, 1000)
   }
</script>
</html>

總之，我們討論了三種向 JavaScript Date 物件新增小時或分鐘的方法。第一種方法是使用 setHours() 方法。第二種是使用 setMinutes() 方法，第三種是 getTime() 方法。

更新於: 2022-08-22

11K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.