你的位置:首页 > Java教程

[Java教程]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; //min        var m = sec % 60;        sec = (sec - m) / 60; //hour        var h = sec % 24;        var d = (sec - h) / 24;//day        var 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秒再重新生成时间格式,当然也可以按照上面时间同步的例子,直接进行时间减少,方法很多,我这个不一定是最优的,欢迎大家交流,谢谢!