JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで日付に時間と分を追加する方法【setHours・setMinutesの使い方】

JavaScriptで日付（Dateオブジェクト）に時間や分を加算したい場合は、setHours()メソッドとsetMinutes()メソッドを使用します。これらのメソッドは、既存の時刻の値をもとに新しい値を設定できるため、簡単に時刻の計算が行えます。

サンプルコード

以下は、現在時刻に2時間20分を追加して表示する例です。

<html>
   <head>
      <title>JavaScript Dates</title>
   </head>
   <body>
      <script>
         var dt = new Date();
         document.write("Current Date: "+dt);
         dt.setHours(dt.getHours() + 2);
         dt.setMinutes(dt.getMinutes() + 20);
         document.write("<br>Updated Date: "+dt);
      </script>
   </body>
</html>

コードの解説

このコードの処理の流れは以下の通りです。

  • new Date()で現在の日付と時刻を持つDateオブジェクトを生成します。
  • dt.getHours() + 2で現在の「時」に2を加算し、その値をsetHours()で設定します。
  • dt.getMinutes() + 20で現在の「分」に20を加算し、その値をsetMinutes()で設定します。
  • 更新後の日時をdocument.write()で画面に出力します。

実行結果の例

現在時刻が「10:30」の場合、出力は次のようになります。

Current Date: Mon May 12 2025 10:30:00 GMT+0900
Updated Date: Mon May 12 2025 12:50:00 GMT+0900

注意点

setHours()やsetMinutes()に範囲外の値（例えば25時や70分など）を渡しても、JavaScriptが自動的に繰り上げ処理を行うため、日付や時刻は正しく計算されます。また、負の値を指定すれば、時刻を減算（過去に戻す）することも可能です。

  1. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht

  2. OneNoteで日付と時刻を追加・編集する方法

    OneNoteで新しいページを作成すると、ノートブックに日付と時刻のスタンプが自動的に追加されます。この自動の日付と時刻は編集可能で、OneNoteが提供するタイムスタンプ機能を使えば、ページに自由に日付や時刻を追加することもできます。さらに、現在の日付や過去の日付を追加したり、特定の日付を入力して祝日などの予定を記録しておくことも可能です。 OneNoteで日付と時刻を挿入する方法 タイムスタンプとは、ノートブックのページに日付や時刻を追加できるOneNoteの便利な機能です。OneNoteで利用できるタイムスタンプには、以下の3種類があります。 日付: 今日の日付を挿入します。 時刻: