我目前正在学习一些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;
你的代码是在 "客户端 "设备上执行的--你的智能手机,PC什么的,所以你在这个设备上设置了一个时间。这个'Date'对象实际上不知道服务器上的任何时间。时间是由客户端机器上安装的底层操作系统决定的。
你的问题并不是真的与某些特定的技术有关(比如Java Script),而是如何让服务器和客户端机器上的时间同步。其实这很复杂。
你可以再进一步问,如何在属于不同时区的设备之间实现时间同步。不同的计算应该考虑到 "夏令时 "时间段呢?
作为计算机之间的时间同步的共同答案,你可以阅读关于网络时间协议。NTP
如果你已经启用了PHP,你可以做如下操作。
var serverTimeString = '<?php print date("F d, Y H:i:s", time())?>';
var today = new Date(serverTimeString);
好吧,这是我做的。(没有任何变化)
<!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>
它将虽然不同的国家,但设置自动
下面的代码将给你1970年的秒数。(Unix时间戳 Epoch时间)
Math.round( new Date().getTime() / 1000 )