現在のタイムゾーンを取得したい | 日付・時間操作

現在のタイムゾーンを取得したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのgetTimezoneOffset()メソッドを使用して、現在のタイムゾーンのオフセットを取得する方法を紹介します。

使用するオブジェクト: Dateオブジェクト
現在のタイムゾーンを取得して表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するオブジェクト: Dateオブジェクト

JavaScriptのDateオブジェクトを使用することで、現在のタイムゾーンのオフセットを簡単に取得できます。getTimezoneOffset()は、UTCとの時間差を分単位で返します。

現在のタイムゾーンを取得して表示するプログラム

以下のコードでは、現在のタイムゾーンのオフセットを取得し、それを「UTC+9時間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() {
            // 現在のタイムゾーンのオフセットを取得 (分単位)
            const timezoneOffset = new Date().getTimezoneOffset();

            // オフセットを時間と分に変換
            const hoursOffset = Math.floor(Math.abs(timezoneOffset) / 60);
            const minutesOffset = Math.abs(timezoneOffset) % 60;

            // オフセットがマイナスの場合はプラス表記にする
            const sign = timezoneOffset > 0 ? "-" : "+";

            // タイムゾーン情報をHTMLに表示
            document.getElementById('timezoneInfo').textContent = `現在のタイムゾーン: UTC${sign}${hoursOffset}時間${minutesOffset}分`;
        }
    </script>
</head>
<body>

    <h1>現在のタイムゾーンを取得する方法</h1>

    <div id="timezoneInfo"></div>

</body>
</html>