日付の差を時間、分、秒単位で計算したい | 日付・時間操作 | JavaScript 目的別リファレンス

スポンサーリンク

このプログラムでは、2つの日付間の差を時間、分、秒単位で計算し、その結果を表示します。

スポンサーリンク

使用するメソッド: getTime()

getTime()メソッドを使って、2つの日付のミリ秒単位での差分を取得し、それを時間、分、秒に変換します。

日付の差を計算するプログラム

以下のコードでは、2024年9月20日12:00:00と2024年9月22日15:45:30の日付の差を計算し、表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付の差を時間、分、秒単位で計算する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 2つの日付の差を時間、分、秒で計算する関数
            function calculateTimeDifference(startDate, endDate) {
                const timeDiff = endDate - startDate; // ミリ秒での差分
                const hours = Math.floor(timeDiff / (1000 * 60 * 60));  // 時間
                const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));  // 分
                const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);  // 秒

                return `${hours}時間 ${minutes}分 ${seconds}秒`;
            }

            // テスト用の日付
            const startDate = new Date(2024, 8, 20, 12, 0, 0);  // 2024年9月20日12:00:00
            const endDate = new Date(2024, 8, 20, 15, 45, 30);  // 2024年9月22日15:45:30

            // 結果をHTMLに表示
            document.getElementById('timeDifference').textContent = `日付の差は ${calculateTimeDifference(startDate, endDate)} です。`;
        }
    </script>
</head>
<body>

    <h1>日付の差を時間、分、秒単位で計算する方法</h1>

    <div id="timeDifference"></div>

</body>
</html>

プログラムの解説

このプログラムでは、2つの日付オブジェクトの差をミリ秒単位で計算し、それを時間、分、秒に変換して表示しています。getTime()メソッドを使用して、日付間の差分を取得しています。

Dateオブジェクト メソッドの機能一覧

Dateオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのDateオブジェクトは、日時を操作するために使用されるオブジェクトです。以下に、Dateオブジェクトのメソッドを種類ごとにアルファベット順にまとめています。Dateオブジェクトのインスタンスメソッドメソッド名説明と注意点getDate()日(1~31)を取得。注意点: 月初や月末の値に注意。get...