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

【问题标题】：Clock on webpage using server and system time?使用服务器和系统时间在网页上计时？
【发布时间】：2011-07-08 12:13:16
【问题描述】：

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

【问题讨论】：

您是要显示服务器配置时区的时间，还是运行浏览器的 PC 的本地时区？（或其他我没有想到的）
@CraigMcQueen 我在 11 年前问过这个问题，时区甚至不在我的雷达上！

标签： javascript ajax vb.net clock clock-synchronization

【解决方案1】：

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>

【讨论】：

【解决方案2】：

我之前的做法是：

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

您只需要偶尔从服务器更新它。

您必须解决的问题是，在发出从服务器获取时间的请求时，在获取客户端时间之前会有延迟。您可能可以通过使用 ajax 请求来获取服务器时间而不是其他任何东西来最小化这种情况，从而减少开销和网络延迟等。

【讨论】：

将此标记为答案，因为这是我决定使用的。

【解决方案3】：

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

从服务器获取时间
计算服务器时间与本地时间的差异
通过获取本地时间并使用时差进行调整，每秒或每分钟更新时钟（取决于您显示的内容）
每 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);

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

有疑问也可以check this clock out!

另外，W3Schools 是 javascript 的一个很好的参考。

【讨论】：

【解决方案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（1000 = 1 秒）。
现在获取时间。
现在实例化一个带有递增时间戳的新日期。
创建月份名称
检测上午或下午。
将小时格式从 24 转换为 12
获取会议记录
获取秒数
如果小时数少于 10，则添加 0 个潜在客户
如果分钟数少于 10，则添加 0 个潜在客户
如果秒数小于 10，则添加 0 个潜在客户
现在连接所有时间和日期并将它们放入 DOM 元素中 ID 为“txt”
每 1 秒重复一次该函数
函数在数字前加0

【讨论】：

您能补充说明吗？
逐行添加说明

【解决方案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);

【讨论】：

【解决方案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)  
  }

【讨论】：