12時間制と24時間制の時刻を切り替えたい | 日付・時間操作

12時間制と24時間制の時刻を切り替えたい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのtoLocaleTimeString()メソッドを使用して、12時間制と24時間制の形式で現在の時刻を表示します。切り替えはhour12オプションを使用することで行います。

使用するメソッド: toLocaleTimeString()
12時間制と24時間制を切り替えるプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

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

JavaScriptのtoLocaleTimeString()メソッドは、指定した形式で現在の時刻を文字列として返します。オプションにhour12: trueを指定すると12時間制が適用され、hour12: falseを指定すると24時間制が適用されます。

12時間制と24時間制を切り替えるプログラム

以下のコードでは、現在の時刻を12時間制と24時間制でそれぞれ表示します。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12時間制と24時間制の時刻を切り替える方法</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() {
            // 現在の時刻を取得
            const now = new Date();

            // 24時間制での時刻を取得
            const time24 = now.toLocaleTimeString('ja-JP', { hour12: false });

            // 12時間制での時刻を取得
            const time12 = now.toLocaleTimeString('ja-JP', { hour12: true });

            // 結果をHTMLに表示
            document.getElementById('timeResult').innerHTML = `
                <p>24時間制の時刻: ${time24}</p>
                <p>12時間制の時刻: ${time12}</p>
            `;
        }
    </script>
</head>
<body>

    <h1>12時間制と24時間制の時刻を切り替える方法</h1>

    <div id="timeResult"></div>

</body>
</html>