14

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

4

8 回答 8

18

我以前解决这个问题的方法是：

  • 从服务器上花时间，
  • 从客户那里抽出时间（立即）
  • 得到一个偏移量。
  • 显示时钟时，将偏移量应用于客户端的当前时间。

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

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

于 2011-07-08T12:22:10.047 回答
14

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

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

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

<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

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

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

有任何疑问，您也可以查看这个时钟！

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

于 2011-07-08T12:34:44.780 回答
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

您只需从服务器获取一个时间日期时间，在加载时调用此方法并使用时刻 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)  
  }
于 2017-11-17T03:54:12.600 回答
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 = 1 秒）将 1000 添加到时间戳。
  3. 现在得到小时。
  4. 现在实例化一个带有递增时间戳的新日期。
  5. 创建月份名称
  6. 检测上午或下午。
  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 回答