javascript同步服务器时间和同步倒计时小技巧

之前在网上看到有人提问，如何在页面上同步显示服务器的时间，其实实现方法有几种，可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器，然后将服务器获取到时间显示在页面上，这样虽然能够实现，但存在一个很大的问题，那就是每隔一秒去请求服务器，这样如果用户多了，服务器就会崩溃（内存占用率会很大），所以在我看来，这种方法不可行，我这里给出一种解决方案，能够实现同步服务器时间、同步倒计时，却不占用服务器太多资源，下面我给写实现的思路：
第一步，当用户第一次浏览页面时，服务器首先获取当前时间并显示在页面上（比如：显示在ID为timebox span中）
第二步，设置一个每隔一秒就计算新的时间（新时间以服务器时间为初始值，然后每隔一秒累加一秒并生成新的时间）
第三步，显示第二步计算的时间

是不是很简单，总结成一句话就是：以服务器时间为初始值，然后在页面上自动每隔一秒就累加一秒生成新时间，这样就能保证与服务器时间同步了，误差基本在几秒内，应该没关系了，好了看一下实现的代码吧：

<span id="timebox">11:21:55</span> //第一次将服务器时间显示在这里<script type="text/javascript">$（function （） {var oTime = $（"#timebox"）;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）;function showNewTime（h, m, s） {var timeStr = （"0" + h.toString（））.substr（-2） + ":"+ （"0" + m.toString（））.substr（-2） + ":"+ （"0" + s.toString（））.substr（-2）;oTime.text（timeStr）;}function 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;}}return [h, m, s];}}）;</script>

代码很简单在此就不多作说明（我上面只显示时分秒，大家也可以加上日期，加上日期可在当h==0时，直接从服务器获取一个日期或完整的时间，作为一次时间的校对），不懂的可以在下面评论，我会及时回复的，然后按照这种思路来实现一下同步倒计时，首先说明一下，什么是同步倒计时，就是类似秒杀一样，设置一个结束时间，然后计算当前时间与结束时间之间间隔，而且必需保证在不同的电脑、浏览器上显示的倒计时时间均相同，实现代码如下：

<！DOCTYPE html><html><head><title>同步倒计时</title><script type="text/javascript" src="jquery-1.4.4.min.js"></script></head><body><span id="timebox">1天00时00分12秒</span> <！--假设：1天00时00分12秒是从服务器获取的倒计时数据--><script type="text/javascript">$（function （） {var tid = setInterval（function （） {var oTimebox = $（"#timebox"）;var syTime = oTimebox.text（）;var totalSec = getTotalSecond（syTime） - 1;if （totalSec >= 0） {oTimebox.text（getNewSyTime（totalSec））;} else {clearInterval（tid）;}}, 1000）;//根据剩余时间字符串计算出总秒数function getTotalSecond（timestr） {var reg = /d+/g;var timenums = new Array（）;while （（r = reg.exec（timestr）） ！= null） {timenums.push（parseInt（r））;}var second = 0, i = 0;if （timenums.length == 4） {second += timenums[0] * 24 * 3600;i = 1;}second += timenums[i] * 3600 + timenums[++i] * 60 + timenums[++i];return second;}//根据剩余秒数生成时间格式function getNewSyTime（sec） {var s = sec % 60;sec = （sec - s） / 60; //minvar m = sec % 60;sec = （sec - m） / 60; //hourvar h = sec % 24;var d = （sec - h） / 24;//dayvar syTimeStr = "";if （d > 0） {syTimeStr += d.toString（） + "天";}syTimeStr += （"0" + h.toString（））.substr（-2） + "时"+ （"0" + m.toString（））.substr（-2） + "分"+ （"0" + s.toString（））.substr（-2） + "秒";return syTimeStr;}}）;</script></body></html>

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