Javascript时钟？

Posted 2023-02-22

技术标签:

【中文标题】Javascript时钟？【英文标题】：Javascript clock? 【发布时间】：2015-03-01 12:38:36 【问题描述】：

我在 php 中获得了 GMT 时间，我想计算它，就像时钟一样。

<?php $time = gmdate('H:i:s'); ?>

<script>var time = <?php echo($time) ?>;
    setInterval(function() 
        time += 1;
        $("#timediv").text("Current time (GMT): " + time);
        //somehow convert it to 11:44:31 AM ??
    , 1000);
</script>

seomeon 可以帮助我吗？

【问题讨论】：

使用客户端时钟。否则会漂移。并在每次更新时从客户端获取当前时间。 ***.com/questions/10211145/… 【参考方案1】：

首先，依靠 setTimeout/setInterval 精度来显示时间并不是一个好主意。它们不那么准确有多种原因，例如 CPU 速度下降。这就是为什么你应该使用 Date 对象，它使用实际的时钟。

当我想在客户端使用服务器的时间时，我会这样做：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<!-- dateFormat plugin for nice and easy time formatting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>

<script>
    var clientTime = (new Date()).getTime(),
        serverTime = <?php echo time() ?> * 1000,
        difference = clientTime - serverTime;

    setInterval(function () 
        var now = new Date();

        now.setTime(now.getTime() - difference);

        $("#timediv").text("Current time (GMT): " + $.format.date(now, "hh:mm:ss a"));
    , 1000);
</script>

其背后的关键概念是计算服务器时间和客户端时间之间的差异。然后，您将您的客户端（每次使用new Date() 创建）标准化。我们仍在使用 setInterval，但即使由于某种原因延迟或加速，显示的时间仍然是正确的。

【讨论】：

我都同意。我要改变的唯一一点是让setInterval 更频繁，例如 100-250 而不是 1000。原因是它并不完全准确，而且在我第一次看到两个时钟时让我很困扰秒在一个滴答声中过去 ;) 但它会返回我的时间，而不是 GMT（英国时间）:(【参考方案2】：

谢谢大家，我成功了：

PHP：

$time = gmdate('H:i:s');
$time = preg_replace("/^([\d]1,2)\:([\d]2)$/", "00:$1:$2", $time);
sscanf($time, "%d:%d:%d", $hours, $minutes, $seconds);
$timeInSeconds = $hours * 3600 + $minutes * 60 + $seconds;

javascript：

<script>
    function fromSeconds(sec)
        var d=new Date(0,0,0);
        d.setSeconds(+sec);
        return (d.getHours() ? d.getHours()+":" : "")+d.getMinutes()+":"+d.getSeconds();
    

    var time = <?php echo($timeInSeconds) ?>;
    var newTime = 0;
    setInterval(function() 
        time += 1;
        var newTime = fromSeconds(time);
        $("#timediv").text("The current GMT time is: " + newTime);
    , 1000);');
    ?>
</script>

【讨论】：

这很糟糕，但您可能不会注意到它。仅仅因为您告诉代码每 1,000 毫秒运行一次，not 是否意味着它将在恰好那个时间运行。每个滴答声通常有 +/- 8 毫秒的误差。请参阅 Robo Robok 的回答，了解应该如何完成。为什么要投反对票而不是投赞成票？只要其他人没有错（基于问题）？【参考方案3】：

我不会遵循 motanelu 的回答，而是将其更改为：

<script>var time = Date.parse('<?php echo($time) ?>');
    setInterval(function() 
        time.setSeconds(time.getSeconds() + 1);
        $("#timediv").text("Current time (GMT): " + time);
        //somehow convert it to 11:44:31 AM ??
    , 1000);
</script>

这将创建一个 Date 对象，您可以使用例如time.toLocaleTimeString(); 进行格式化

【讨论】：

这将使用客户端的日期，而不是服务器的！这将如何使用客户日期？注意我从 php 脚本中填充 Date() :)【参考方案4】：

替换