javascript同步服务器时间和同步倒计时提示

在网上看到有人问如何在页面上同步显示服务器时间。事实上，有几种方法可以实现这一点。可能大部分人马上想到可以用Ajax每秒请求服务器，然后在页面上显示服务器获得的时间。虽然可以做到，但是有一个很大的问题，就是每秒都要请求服务器，这样如果用户多了，服务器就会崩溃(内存占用率会很大)。因此，在我看来，这种方法是不可行的。我在这里给出一个解决方案，可以同步服务器时间和倒计时，但是不会占用服务器太多资源。这里我就写一下实现思路：

第一步，当用户第一次浏览页面时，服务器首先获取当前时间并将其显示在页面上(例如，以ID显示在timebox span中)。

第二步是设置每秒计算一次的新时间(新时间以服务器时间为初始值，然后每秒累加一秒生成新时间)。

第三步，显示第二步计算的时间。

不是很简单吗？可以用一句话来概括：以服务器时间为初始值，然后在页面上每秒自动累加生成一个新的时间，这样就可以和服务器时间同步，误差基本在几秒之内。应该没问题。请看看实现的代码：

span id=' time box ' 11:21:55/span//服务器时间首次显示在此处。脚本类型=' text/JavaScript ' $(function(){ var o time=$(' # time box ')；var ts=oTime.text()。split(': '，3)；var tnums=[parseInt(ts[0])，parseInt(ts[1])，parseInt(ts[2])]；setInterval(function(){ tnums=getNextTimeNumber(tnums[0]，tnums[1]，tnums[2])；showNewTime(tnums[0]，tnums[1]，tnums[2])；}, 1000);函数showNewTime(h，m，s) { var timeStr=('0' h.toString())。substr(-2)' : '(' 0 ' m . ToString())。substr(-2)' : '(' 0 ' s . ToString())。substr(-2)；otime . text(timeStr)；}函数getNextTimeNumber(h，m，s){ if(s==60){ s=0；} if(s==0){ if(m==60){ m=0；} } if(m==0){ if(h==24){ h=0；} }返回[h，m，s]；} });/script代码很简单，这里就不解释了(我上面只显示小时和分钟，还可以添加日期，并且当h==0时，可以直接从服务器获取一个日期或完整时间作为时间校对)。不懂的可以在下面评论，我会及时回复。然后，按照这个思路，我就实现了同步倒计时。首先，我将解释什么是同步倒计时，它就像一个尖峰。设置一个结束时间，然后计算当前时间和结束时间之间的间隔，并确保不同电脑和浏览器上显示的倒计时时间相同。实现代码如下：

！DOCTYPE htmlhtmlhead标题同步倒计时/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .4 .量滴js '/script/head body span id=' time box ' 1天00时00分12秒/span！-假设：1天00时00分12秒是从服务器获取的倒计时数据-脚本类型=' text/JavaScript ' $(function(){ var tid=setInterval(function(){ var oTimebox=$(' # time box ')))；var SyTime=otimeBox。text()；var total sec=getTotalSecond(SyTime)-1；if(total sec=0){ otimebox。文本(GetNewsytime(总秒))；} else { clearInterval(tid)；} }, 1000);//根据剩余时间字符串计算出总秒数函数getTotalSecond(time tr){ var reg=/\ d/g；var time nums=new Array()；while((r=reg。exec(timetr))！=null){ time nums。push(ParSeint(r))；} var秒=0，I=0；if(时间单位。长度==4){秒=时间nums[0]* 24 * 3600；I=1；}秒=时间nums[I]* 3600时间nums[I]* 60时间nums[I]；第二次返回；} //根据剩余秒数生成时间格式函数getNewSyTime(秒){ var s=秒% 60;秒=(秒-s)/60；//最小var m=秒% 60;sec=(sec-m)/60；//小时var h=秒% 24;var d=(秒-小时)/24;//day var systemtr=' '；if(d ^ 0){ SyTiME str=d . ToString()'天；} SyStemTr=(“0”h . ToString()).substr(-2)'时(“0”m . ToString()).substr(-2)'分(“0”s . ToString()).substr(-2)'秒；返回SyStemTimeStr} });/脚本/正文/html

为了保证倒计时的精确度，我采用了先将倒计时时间间隔统一计算成秒，然后减一秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！