web-dev-qa-db-ja.com

クライアントの正確な現地時間を取得する方法は？

クライアントシステムのタイムゾーンに関係なく、クライアントのローカル時間を取得する最良の方法は何ですか？アプリケーションを作成していますが、まずクライアントがアクセスしている場所の正確な日時を取得する必要があります。クライアントシステムのIPアドレスを検出することにも欠点があるか、クライアントシステムのタイムゾーンを検出することが危険な場合があります。クライアントに間違った日時を表示することは非常に恥ずかしいことなので、本当に信頼でき、エラーに対して脆弱ではない方法はありますか？.

javascriptjquerydatetimegeolocationtimezone
34
user850234

JavaScriptで？新しいDateオブジェクトをインスタンス化するだけです

var now = new Date();

これにより、クライアントのローカル時間で新しいDateオブジェクトが作成されます。

44
Madara Uchiha

最近では、1行のコードだけでユーザーの正しいタイムゾーンを取得できます。

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

ソース： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions

その後、 moment-timezone を使用して、次のようにタイムゾーンを解析できます。

const currentTime = moment().tz(timezone).format();
18
Stanislau Buzunko

GMT/UTCに関連するクライアントのタイムゾーンを知りたい場合は、次のようにします。

_var d = new Date();
var tz = d.toString().split("GMT")[1].split(" (")[0]; // timezone, i.e. -0700
_

タイムゾーンの実際の名前が必要な場合は、これを試すことができます：

_var d = new Date();
var tz = d.toString().split("GMT")[1]; // timezone, i.e. -0700 (Pacific Daylight Time)
_

更新1

最初のコメントごとに、d.getTimezoneOffset()を使用してUTCからのオフセットを分単位で取得することもできます。しかし、いくつかの落とし穴があります。

  1. 返される分の記号（+/-）は、おそらく予想とは反対です。 8時間遅れている場合UTCは、_480_ではなく、_-480_を返します。詳細については [〜＃〜] mdn [〜＃〜] または [〜＃〜] msdn [〜＃〜] を参照してください。
  2. 実際に、クライアントが報告しているタイムゾーンを返しませんが、2番目の例のようになります。現在、UTCからオフセットされた分だけです。したがって、夏時間に基づいて変更されます。

更新2

文字列分割の例は機能しますが、読みにくくなる可能性があります。以下は、理解しやすく、おそらくより高速な正規表現バージョンです（どちらの方法も非常に高速です）。

GMT/UTCに関連するクライアントのタイムゾーンを知りたい場合は、次のようにします。

_var gmtRe = /GMT([\-\+]?\d{4})/; // Look for GMT, + or - (optionally), and 4 characters of digits (\d)
var d = new Date().toString();
var tz = gmtRe.exec(d)[1]; // timezone, i.e. -0700
_

タイムゾーンの実際の名前が必要な場合は、これを試してください：

_var tzRe = /\(([\w\s]+)\)/; // Look for "(", any words (\w) or spaces (\s), and ")"
var d = new Date().toString();
var tz = tzRe.exec(d)[1]; // timezone, i.e. "Pacific Daylight Time"
_
10
pseudosavant

これに取り組まなければならなかったので、答えを残すと思った。 jQueryは必要ありません。オブジェクトが既にキャッシュされているため、要素の更新に使用しました。

最初に、必要な日付/時刻をHTMLテンプレートに返すphp関数を作成しました

 /**
 * Gets the current location time based on timezone
 * @return string
 */


function get_the_local_time($timezone) {

    //$timezone ='Europe/London';

    $date = new DateTime('now', new DateTimeZone($timezone));

    return array(
        'local-machine-time' => $date->format('Y-m-d\TH:i:s+0000'),
        'local-time' => $date->format('h:i a')
    );

}

次に、これをHTMLテンプレートで使用して初期時間を表示し、データ属性でjavascriptに必要な日付形式をレンダリングします。

        <span class="box--location__time" data-time="<?php echo $time['local-machine-time']; ?>">
            <?php  echo $time['local-time']; ?>
        </span>

次に、日付オブジェクトでgetUTCHoursを使用して、ユーザーのタイムゾーンに関係なく時刻を返しました

GetUTCHours（）メソッドは、世界時に従って、指定された日時の時間（0〜23）を返します。

var initClocks = function() {

    var $clocks = $('.box--location__time');

    function formatTime(hours, minutes) {

        if (hours === 0) {
            hours = 12;
        }

        if (hours < 10) {
            hours = "0" + hours;
        }

        if (minutes < 10) {
            minutes = "0" + minutes;
        }

        return {
            hours: hours,
            minutes: minutes
        }
    }

    function displayTime(time, $clockDiv) {

        var currentTime = new Date(time);

        var hours = currentTime.getUTCHours();
        var minutes = currentTime.getUTCMinutes();
        var seconds = currentTime.getUTCSeconds();
        var initSeconds = seconds;

        var displayTime = formatTime(hours, minutes);

        $clockDiv.html(displayTime.hours + ":" + displayTime.minutes + ":" + seconds);

        setInterval(function() {

            if (initSeconds > 60) {
                initSeconds = 1;
            } else {
                initSeconds++;
            }

            currentTime.setSeconds(initSeconds);

            hours = currentTime.getUTCHours();
            minutes = currentTime.getUTCMinutes();
            seconds = currentTime.getUTCSeconds();

            displayTime = formatTime(hours, minutes);

            $clockDiv.html(displayTime.hours + ":" + displayTime.minutes + ":" + seconds);

        }, 1000);

    }



    $clocks.each(function() {

        displayTime($(this).data('time'), $(this));

    });

};

次に、setSecondsメソッドを使用して、ページの読み込みからの経過秒数に基づいて日付オブジェクトを更新し（単純な間隔関数）、HTMLを更新します

2
MrBizle

都市または場所の現地時間を表示する最も信頼できる方法は、 Google Time Zone API などのTime Zone APIを利用することです。それは正しいタイムゾーンを返し、さらに重要なことに、私が知っている限りJavaScriptのDate（）オブジェクトを使用することはできません。 APIを使用して現地時間を取得および表示するための良いチュートリアルがあります here ：

var loc = '35.731252, 139.730291' // Tokyo expressed as lat,lng Tuple
var targetDate = new Date() // Current date/time of user computer
var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC
var apikey = 'YOUR_TIMEZONE_API_KEY_HERE'
var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '&timestamp=' + timestamp + '&key=' + apikey

var xhr = new XMLHttpRequest() // create new XMLHttpRequest2 object
xhr.open('GET', apicall) // open GET request
xhr.onload = function(){
    if (xhr.status === 200){ // if Ajax request successful
        var output = JSON.parse(xhr.responseText) // convert returned JSON string to JSON object
        console.log(output.status) // log API return status for debugging purposes
        if (output.status == 'OK'){ // if API reports everything was returned successfully
            var offsets = output.dstOffset * 1000 + output.rawOffset * 1000 // get DST and time zone offsets in milliseconds
            var localdate = new Date(timestamp * 1000 + offsets) // Date object containing current time of Tokyo (timestamp + dstOffset + rawOffset)
            console.log(localdate.toLocaleString()) // Display current Tokyo date and time
        }
    }
    else{
        alert('Request failed.  Returned status of ' + xhr.status)
    }
}
xhr.send() // send request

From： JavaScriptとGoogle Time Zone APIを使用して任意の都市の現地時間を表示

1
coco puffs

私のコードは

  <html>
  <head>
  <title>Title</title>
  <script type="text/javascript"> 
  function display_c(){
  var refresh=1000; // Refresh rate in milli seconds
  mytime=setTimeout('display_ct()',refresh)
  }

  function display_ct() {
  var strcount
  var x = new Date()
  document.getElementById('ct').innerHTML = x;
  tt=display_c();
  }
  </script>
  </head>

  <body onload=display_ct();>
  <span id='ct' ></span>

  </body>
  </html>

より多くのコードが必要な場合は、ブログにアクセスしてください http://mysimplejavascriptcode.blogspot.in/

0
user3768731