jqueryでネットワーク時間を設定する方法

フロントエンド開発では、さまざまな操作を実行するために現在時刻を取得する必要があることがよくあります。ただし、ローカル時刻を取得する場合の欠点の 1 つは、ローカル時刻がユーザーのコンピュータ システム時刻の影響を受けることです。ユーザーのコンピュータの時刻が正しくないと、取得される時刻も正しくなくなります。したがって、精度を確保するためにネットワーク時間を取得することが必要になる場合があります。

それでは、ネットワーク時間を取得するにはどうすればよいでしょうか?一般的なアプローチは、要求時間インターフェイスを通じて現在時刻を取得することです。ここでは、jQuery を使用してネットワーク時間を取得できます。

jQuery の手動時刻設定方法

jQuery では、次のコードを使用してネットワーク時刻を取得できます:

$.ajax({

url: 'http://quan.suning.com/getSysTime.do',
type: 'post',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function(data){
    console.log(data);//data为当前时间格式为YYYY-MM-DD HH:MM:SS，例如 2022-01-01 12:00:00
}

} );

ここでは、Suning.com に提供されているインターフェイスを通じて現在の時刻を取得します。このうち、url パラメータはインターフェイスのアドレス、dataType パラメータは応答のデータ型です。ここでは、JSONP 形式を使用してデータを取得します。jsonp パラメータは指定されたコールバック関数の名前、jsonpCallback パラメータは指定されたコールバック関数の名前です。コールバック関数。

リクエストが成功すると、成功コールバック関数で現在の時刻データを取得できます。ここで時刻をコンソールに出力します。

時間を手動で設定したい場合はどうすればよいですか?次のコードを使用できます:

const date = new Date('2022/01/01 12:00:00');
console.log(date);

Hereまず、YYYY/MM/DD HH:MM:SS 形式の日付文字列を渡して Date オブジェクトを作成します。ここで設定する時刻は 2022/01/01 12:00:00 です。次に、オブジェクトをコンソールに出力するだけです。その時刻のタイムスタンプを取得する必要がある場合は、次のコードを使用できます:

const timeStamp = date.getTime();
console.log(timeStamp);

Here Date オブジェクトの getTime メソッドを使用して、現在時刻のタイムスタンプ (1970 年 1 月 1 日 00:00:00 UTC から現在時刻までのミリ秒数) を取得し、その値をコンソールに出力できます。

jQueryの自動時刻同期方法

手動で時刻を設定するのも便利ですが、実際のアプリケーションでは、時刻が自動的に同期され、継続的に更新されることが望ましいと考えられます。ここでは、setInterval メソッドを使用して時刻を定期的に更新できます。

たとえば、次のコードを使用できます:

function syncTime(){

$.ajax({
    url: 'http://quan.suning.com/getSysTime.do',
    type: 'post',
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    success: function(data){
        const date = new Date(data.replace(/-/g, '/'));
        $('#current-time').html(date.toLocaleString());
    }
});

}
//時刻を毎秒更新します
setInterval(syncTime , 1000);

ここでは、時刻を取得および更新する syncTime メソッドを定義します。成功コールバック関数では、返された時刻文字列をフォーマットし、新しい Date メソッドを使用して Date オブジェクトを作成し、toLocaleString メソッドを使用して時刻をローカル形式に変換し、現在の時刻の ID を使用して dom に時刻を表示します。要素。

最後に、setInterval メソッドを通じて syncTime メソッドを定期的に呼び出して、自動時刻同期の効果を実現します。

まとめ

以上、jQueryによるネットワーク時刻の取得方法と、手動で時刻を設定して自動で時刻を同期する方法を紹介しました。実際のアプリケーションでは、時間の精度を確保するために、特定の状況に応じて適切な方法を選択する必要があります。

以上がjqueryでネットワーク時間を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。