Question

我需要在网页上添加一个时钟。时钟需要与服务器同步，但我真的不想让它经常检查服务器，因为页面将在几台PC上全天候打开。有没有办法从服务器获取时间，然后使用系统时钟保持更新并每15分钟左右检查一次服务器以保持同步？

Answer 1

我以前的方式是：

从服务器中抽出时间，
从客户那里抽出时间（立即）
获得抵消。
显示时钟时，将偏移量应用于客户端上的当前时间。

您只需要偶尔从服务器更新此内容。

你必须解决的问题是，在提出从服务器获取时间的请求时，在获得客户端时间之前会有一段时间。您可以通过使用ajax请求来获取服务器时间而不是其他任何内容来最小化这一点，从而减少开销和网络延迟等。

Answer 2

+Date.now()返回自Unix纪元以来的本地ms。所以：

从服务器获取时间
计算服务器时间与当地时间之间的差异
通过获取当地时间并使用差异进行调整来每秒或分钟更新时钟（取决于您显示的内容）
每隔15分钟更新一次差异。

或类似的东西。

Here's a fiddle demonstrating the first half：

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);

Answer 3

一个想法是在请求时响应页面上的日期时间。像：

<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>

**注意：这只是想法，代码可能不起作用

Answer 4

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>

Answer 5

您可以在每次加载页面时从服务器获取当前时间，因此即使在首次加载时您也将拥有当前服务器时间。之后，您可以在页面设置上使用javascript计时器每秒打勾，然后您将实际上有一个与服务器同步的时钟。您也可以按照建议尝试应用偏移，但我不建议，因为在回发期间存在延迟。

Ajax请求可能是一个有趣的选项。

如有任何疑问，您也可以check this clock out!

此外，W3Schools是javascript的绝佳参考。

Answer 6

<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>

使用PHP创建变量保存服务器时间。
每1秒（1000 = 1秒）向时间戳添加1000。
现在获得时间。
现在使用递增的时间戳实例化新日期。
创建月份名称
检测上午或下午。
将小时格式从24转换为12
获取会议记录
获得秒数
如果小于10小时，则添加0个潜在客户
如果分钟数小于10
如果秒小于10
现在连接所有时间和日期并将它们放在DOM元素中 ID＆＃34; txt＆＃34;
每1秒重复一次功能
函数添加0以引导数字＆lt; 10

Answer 7

请尝试以下代码：

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);

Answer 8

你只需从服务器获得一次约会时间，在加载时调用此方法并使用时刻js作为格式日期：

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)  
  }

使用服务器和系统时间在网页上计时？

8 个答案: