タイムスタンプから経過時間を計算したい | 日付・時間操作

タイムスタンプから経過時間を計算したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、過去のタイムスタンプと現在の時間を比較し、経過時間を「x分前」の形式で表示します。DateオブジェクトのgetTime()メソッドを使用して、ミリ秒単位での時間差を計算しています。

使用するメソッド: getTime(), Math.floor()
タイムスタンプから経過時間を計算するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

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

getTime()メソッドは、1970年1月1日からの経過時間をミリ秒単位で返します。これにより、2つの日付のミリ秒差を計算し、Math.floor()メソッドを使用して分に変換します。

タイムスタンプから経過時間を計算するプログラム

以下のコードでは、現在から10分前のタイムスタンプから経過時間を計算し、「x分前」の形式で表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイムスタンプから経過時間を計算する方法（例：x分前）</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() {
            // 現在の時間と過去のタイムスタンプを定義（例：10分前のタイムスタンプ）
            const now = new Date();
            const pastTimestamp = new Date(now.getTime() - 10 * 60 * 1000); // 10分前

            // タイムスタンプから経過時間を計算する関数
            function getElapsedTime(pastTime, currentTime) {
                const diffMs = currentTime - pastTime; // ミリ秒の差
                const diffMinutes = Math.floor(diffMs / (1000 * 60)); // 分に変換
                return `${diffMinutes}分前`;
            }

            // 経過時間を計算してHTMLに表示
            const elapsedTime = getElapsedTime(pastTimestamp, now);
            document.getElementById('elapsedTime').textContent = `経過時間: ${elapsedTime}`;
        }
    </script>
</head>
<body>

    <h1>タイムスタンプから経過時間を計算する方法（例：x分前）</h1>

    <div id="elapsedTime"></div>

</body>
</html>