Javascript时钟与设备不同答案

【问题标题】：Javascript clock differs from deviceJavascript时钟与设备不同
【发布时间】：2020-05-07 16:51:29
【问题描述】：

我目前正在学习一些 Javascript，并且我已经制作了一个实时时钟（实际上我修改了 W3school 的代码，但无论如何......我已经想出了如何用 PHP 制作一个时钟，所以没有意义重复...... )

但实时时钟似乎无法与不同的设备同步，我想知道原因。

W3schools 将日期对象解释为自 1970 年以来的毫秒数，所以我不明白为什么它会出错……在我看来，它不是那样做，而是反映计算机的时钟是什么.

当我在智能手机上打开网站时，时钟是 30 秒左右。

有没有办法让时钟反映服务器时间而不是每个用户的计算机？

这里是代码

var ampm = "AM"; //Default
var message="";
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
h=checkTime2(h);
document.getElementById('clocktxt').innerHTML=h+":"+m+":"+s+ " " +ampm + " " + message;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
message = "How long you gonna sit there?";
  }
return i;
}

function checkTime2(i)
{
if (i>12)
  {
  i=i-12;
ampm="PM";
  }
return i;
}

window.onload=startTime;

【问题讨论】：

标签： javascript sync clock

【解决方案1】：

您的代码在“客户端”设备上执行 - 您的智能手机、PC 等等。因此，您在此设备上设置了时间。这个“日期”对象实际上对服务器上的时间一无所知。时间由安装在客户端机器上的底层操作系统决定。

您的问题实际上与某些特定技术（例如 Java Script）无关，而是与如何在服务器和客户端计算机上同步时间有关。它实际上相当复杂。

您可以更进一步，询问如何在属于不同时区的设备之间同步时间。应该考虑“夏令时”时间段的不同计算怎么样？

作为计算机之间时间同步的常见答案，您可以阅读网络时间协议，NTP

【讨论】：

您好，感谢您的回答和链接...我不认为制作时钟会这么难：P 哦，我也不必担心不同的时区，我知道这个网站只会在一种状态下使用....也许有一种方法可以在 PHP 服务器时间启动时钟？
是的，通过向 PHP 服务器发送 AJAX 请求来获取服务器时间。

【解决方案2】：

如果您启用了 PHP，您可以执行以下操作：

var serverTimeString = '<?php print date("F d, Y H:i:s", time())?>';
var today = new Date(serverTimeString);

【讨论】：

【解决方案3】：

嗯，我就是这样做的：（完全没有变化）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clock</title>
</head>
<body>

<div id="MyClockDisplay" class="clock" onload="showTime()">
     </div>
     <script>
     function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "PM";

    if(h == 02){
        h = 12;
    }


    if(h > 12){
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;

    setTimeout(showTime, 1000);
    }
showTime();
</script>
<style>
     body {
    background: url('imagename.jpg');
    color: white;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #e6967e;
    font-size: 60px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 7px;
    -webkit-transition: 0.5s;



}
.clock:hover {
     transform: translateY(-10px);
     transition: 0.5s;
     font-size: 80px;
     color: whitesmoke;
}

</style>
</body>
</html>

虽然会因国家而异，但会自动设置

【讨论】：

【解决方案4】：

以下代码将为您提供从 1970 年开始的秒数。[Unix 时间戳/纪元时间]

Math.round( new Date().getTime() / 1000 )

【讨论】：