時間差を分、秒に変換して表示したい | 日付・時間操作

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

INDEX

使用するメソッド: getTime(), Math.floor()
時間差を分、秒に変換して表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: getTime(), Math.floor()

getTime()メソッドは、1970年1月1日からのミリ秒数を返します。Math.floor()メソッドは、小数点以下を切り捨てて整数に変換します。これらを使って時間差を計算し、分と秒に変換しています。

時間差を分、秒に変換して表示するプログラム

以下のコードでは、2024年9月22日の10:00から10: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つの時間を定義
            const startTime = new Date('2024-09-22T10:00:00');
            const endTime = new Date('2024-09-22T10:45:30');

            // 時間差をミリ秒で計算
            const timeDifferenceMs = endTime - startTime;

            // ミリ秒を分と秒に変換
            const minutes = Math.floor(timeDifferenceMs / (1000 * 60));
            const seconds = Math.floor((timeDifferenceMs % (1000 * 60)) / 1000);

            // 結果をHTMLに表示
            document.getElementById('timeDifference').textContent = `時間差: ${minutes}分 ${seconds}秒`;
        }
    </script>
</head>
<body>

    <h1>時間差を分、秒に変換して表示する方法</h1>

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

</body>
</html>