14

Webページに時計を追加する必要があります。時計はサーバーと同期する必要がありますが、ページは複数のPCで24時間年中無休で開かれるため、サーバーを常にチェックする必要はありません。サーバーから時刻を取得し、システムクロックを使用して更新を維持し、15分ごとにサーバーをチェックして同期を維持する方法はありますか？

4

8 に答える 8

18

私が以前にこれについて行った方法は次のとおりです。

  • サーバーから時間をかけて、
  • クライアントから時間を取ってください（すぐに）
  • オフセットを取得します。
  • 時計を表示するときは、クライアントの現在の時刻にオフセットを適用します。

これはサーバーから時々更新する必要があるだけです。

ただし、解決しなければならない問題は、サーバーから時刻を取得するように要求する際に、クライアントの時刻を取得する前に遅延が発生することです。おそらく、ajaxリクエストを使用してサーバー時間だけを取得し、それによってオーバーヘッドやネットワークラグなどを削減することで、これを最小限に抑えることができます。

于 2011-07-08T12:22:10.047 に答える
14

+Date.now()Unixエポック以降のローカルmsを返します。それで：

  • サーバーから時間を取得する
  • サーバー時間と現地時間の差を計算する
  • 現地時間を取得し、差を使用して調整することにより、（表示しているものに応じて）1秒または1分ごとに時計を更新します
  • 15分ごとに違いを更新します。

またはそのようなもの。

これが前半を示すフィドルです：

var serverTime = 1310127993162; //this would come from the server obviously
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    console.log(+Date.now() + timeDiff);
}, 1000);
于 2011-07-08T12:18:59.790 に答える
6 
Server Time: <input type="text" id="clock" value="" size='8'>

<script type="text/javascript">
var serverTime = <?php echo time() * 1000; ?>; //this would come from the server
var localTime = +Date.now();
var timeDiff = serverTime - localTime;

setInterval(function () {
    var realtime = +Date.now() + timeDiff;
    var date = new Date(realtime);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = date.getMinutes();
    // seconds part from the timestamp
    var seconds = date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes + ':' + seconds;

    $('#clock').attr('value',formattedTime); <-- input id=clock
}, 1000);
</script>
于 2013-09-18T13:00:11.563 に答える
4

1つのアイデアは、要求されたときにページの日時に応答することです。お気に入り：

<html>
your serveside codes,
<script>
var serverdatetime = new Date("<%=Datetime.Now%>");
//use serverdatetime and update it after 15 mins.

// you can use ajax to get datetime
setTimeout(function(){
    $.ajax({
  url: 'http://yourhost.com/getdate',
  success: function( data ) {
    // use data and update serverdatetime
  }
});},54000);
</script>
server codes

</html>

**注：これはアイデアのみであり、コードが機能しない可能性があります

于 2011-07-08T12:21:03.587 に答える
0

ページが読み込まれるたびにサーバーから現在の時刻を取得できるため、最初の読み込みでも現在のサーバー時刻がわかります。その後、1秒ごとにチェックするように設定されたページでjavascriptタイマーを使用すると、サーバーと同期して時計が実質的に機能するようになります。提案されているようにオフセットを適用することもできますが、ポストバック中にラグがあるため、お勧めしません。

Ajaxリクエストは興味深いオプションかもしれません。

疑問がある場合は、この時計もチェックしてください。

また、W3Schoolsはjavascriptの優れたリファレンスです。

于 2011-07-08T12:34:44.780 に答える
0 
<script>
var ctoday = <?php echo time() * 1000 ?>;
setInterval(function() {ctoday += 1000;},1000);
function startTime() {
    var today = new Date(ctoday);
    var montharray = new Array("Jan","Feb","Mar","Abr","May","Jun","Jul","Ogu","Sep","Oct","Nov","Des");
    var h = today.getHours();
    var ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12;
    h = h ? h : 12;
    var m = today.getMinutes();
    var s = today.getSeconds();
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    checkTime(today.getDate())+" "+montharray[today.getMonth()]+" "+today.getFullYear() + " (" + ampm +" " + h + ":" + m + ":" + s +")"; 
    setTimeout(startTime, 1000);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
</script>
<body onLoad="startTime();">
    <span id="txt"></span>
</body>
  1. PHPを使用してサーバー時間を保持する変数を作成します。
  2. 1秒ごとにタイムスタンプに1000を追加します（1000 = 1秒）。
  3. 今時間を取得します。
  4. 次に、タイムスタンプを増やして新しい日付をインスタンス化します。
  5. 月の名前を作成します
  6. AMまたはPMを検出します。
  7. 時間形式を24から12に変換します
  8. 議事録を取得する
  9. 秒を取得する
  10. 10時間未満の場合は、0件のリードを追加します
  11. 10分未満の場合は0リードを追加します
  12. 10秒未満の場合は0リードを追加します
  13. ここで、すべての日時を連結し、ID「txt」を使用してDOM要素に配置します。
  14. 1秒ごとに機能を繰り返す
  15. 関数は0を加算して、10未満の数値を導きます
于 2016-08-21T17:47:17.950 に答える
0

以下のコードを試してください：

var m_serverDateTime;
var currentOffsetedTime;
var diffMilliseconds;

$(document).ready(function () {
   m_serverDateTime = getServerDateTime();/*your function to get server time 
by ajax call */   
diffMilliseconds = GetServerTimeDifference(m_serverDateTime);

});

 function GetServerTimeDifference(serverdatetime) {
  var fromdate = new Date();

  var todate = new Date(serverdatetime);

  var localdiffMilliseconds = todate - fromdate;

  return localdiffMilliseconds;
 }

setInterval(function () {
  //var currentOffsetedTime = new Date().setMinutes(diffMinutes);
  currentOffsetedTime = new Date();
  currentOffsetedTime.setMilliseconds(diffMilliseconds);

  $('#lblTimer').text(format(currentOffsetedTime, 'dd/MM/yyyy  HH:mm'));
}, 1000);
于 2017-09-20T16:52:02.217 に答える
0

サーバーから1回の日時を取得します。ロード時にこのメソッドを呼び出し、momentsjsを使用して日付をフォーマットします。

var timeMiliSecond = new Date(serverTime).getTime();
 callRepeatedly() {
    setTimeout(() => {
         timeMiliSecond = timeMiliSecond+1000;         
         serverTime=moment(newDate(timeMiliSecond)).format('MM-DD-YYYY HH:mm:ss');
         this.callRepeatedly();
      }, 1000)  
  }
于 2017-11-17T03:54:12.600 に答える