Javascript 使用服务器和系统时间在网页上计时？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6624239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clock on webpage using server and system time?
提问by Shawn
I need to add a clock to a web page. The clock needs to be synchronized with a server but I really don't want to have it constantly check the server as the page will be open 24/7 on several PCs. Is there some way to get the time from the server and then use the systems clock to keep it updated and check the server every 15 minutes or so to keep it synced?
我需要在网页上添加一个时钟。时钟需要与服务器同步，但我真的不想让它经常检查服务器，因为页面将在多台 PC 上 24/7 全天候打开。有什么方法可以从服务器获取时间，然后使用系统时钟保持更新并每 15 分钟左右检查一次服务器以保持同步吗？
回答by Jon Egerton
The way I've gone about this before is:
我之前的处理方式是：
- Take the time from the server,
- Take the time from the client (immediately)
- Get an offset.
- When showing the clock, apply the offset to the current time on the client.
- 从服务器上花时间，
- 从客户那里花时间（立即）
- 得到一个偏移量。
- 显示时钟时，将偏移量应用于客户端的当前时间。
You only need to update this occasionally from the server.
您只需要偶尔从服务器更新它。
The problem that you've got to sort out though is that in making a request to get the time from the server, there will be a lag before you can get the client time. You can probably minimize this by using an ajax request to get the server time and nothing else, thereby cutting overhead and network lag etc.
不过，您必须解决的问题是，在请求从服务器获取时间时，在获取客户端时间之前会有一个延迟。您可以通过使用 ajax 请求来获取服务器时间而不是其他任何东西来最小化这种情况，从而减少开销和网络延迟等。
回答by Skilldrick
+Date.now()returns local ms since the Unix epoch. So:
+Date.now()返回自 Unix 纪元以来的本地毫秒。所以：
- Get time from server
- Calculate difference between server time and local time
- Update the clock every second or minute (depending on what you're displaying) by getting the local time and adjusting it using the difference
- Every 15 mins update the difference.
- 从服务器获取时间
- 计算服务器时间和本地时间之间的差异
- 通过获取本地时间并使用差异进行调整，每秒或每分钟更新一次时钟（取决于您显示的内容）
- 每 15 分钟更新一次差异。
Or something like that.
或类似的东西。
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);
回答by Mujah Maskey
one idea is to response datetime on page when it is requested. like:
一种想法是在请求时响应页面上的日期时间。喜欢：
<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>
**note : this is idea only, code may not work
**注意：这只是想法，代码可能不起作用
回答by Leonardo Filipe
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>
回答by MidAde
<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>
- Create a Variable holds server time using PHP.
- Adds 1000 to the time stamp every 1 sec (1000 = 1 sec).
- now get the Hours.
- Now instantiate a new date with incremented time stamp.
- creates a months names
- detect AM or PM.
- convert the hours format from 24 to 12
- Getting the minutes
- Getting the seconds
- add 0 leads if hours less than 10
- add 0 leads if minutes less than 10
- add 0 leads if seconds less than 10
- Now concatenate all time and date and put them in the DOM element with ID "txt"
- repeat the function every 1 sec
- function adds 0 to lead the numbers < 10
- 使用 PHP 创建一个保存服务器时间的变量。
- 每 1 秒向时间戳添加 1000（1000 = 1 秒）。
- 现在得到小时。
- 现在用递增的时间戳实例化一个新日期。
- 创建月份名称
- 检测 AM 或 PM。
- 将小时格式从 24 转换为 12
- 获取会议记录
- 获取秒数
- 如果小时数少于 10，则添加 0 个潜在客户
- 如果分钟少于 10 分钟，则添加 0 个潜在客户
- 如果秒数小于 10，则添加 0 个潜在客户
- 现在连接所有时间和日期并将它们放入 ID 为“txt”的 DOM 元素中
- 每 1 秒重复一次该功能
- 函数添加 0 以引导数字 < 10
回答by Bhavik Bhavsar
Try below code this :
试试下面的代码：
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);
回答by Sandip Solanki
you just get one time date time from server, on load call this method and use moments js for format date:
您只需从服务器获取一个时间日期时间，加载时调用此方法并使用 moment 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)
}
回答by Alexandre Fernandes
You can get the current time from the server on every page load, so even on first load you will have the current server time. After that, you may use a javascript timer on the page set to tick every second, and then you will virtually have a clock working synchronized with the server. You may also try applying offsets as suggested, but i wouldn't recommend since there's lag during postbacks.
您可以在每次加载页面时从服务器获取当前时间，因此即使在第一次加载时，您也将获得当前服务器时间。之后，您可以在页面上使用 javascript 计时器设置为每秒滴答一次，然后您实际上将拥有一个与服务器同步的时钟。您也可以尝试按照建议应用偏移量，但我不建议这样做，因为回发期间存在延迟。
Ajax request might be an interesting option.
Ajax 请求可能是一个有趣的选择。
Any doubts, you may also check this clock out!
有任何疑问，您也可以查看此时钟！
Also, W3Schoolsis a great reference for javascript.
此外，W3Schools是 javascript 的一个很好的参考。
