Javascript实现商品秒杀倒计时（时间与服务器时间同步）

亦凉 2023-02-22 12:20 14阅读 0赞

在一些购物商城经常看到有很多商品做秒杀活动，也就是倒计时，本篇文章给大家介绍Javascript实现商品秒杀倒计时（时间与服务器时间同步），需要的朋友可以了解下

现在有很多网站都在做秒杀商品，而这其中有一个很重要的环节就是倒计时。

关于倒计时，有下面几点需要注意：

1.应该使用服务器时间而不是本地时间（本地时间存在时区不同、用户自行设置等问题）。

2.要考虑网络传输的耗时。

3.获取时间时可直接从AJAX的响应头中读取（通过getResponseHeader('Date')来获得），服务器端不需要专门写时间生成脚本。

过程分析：

1.从服务器读到一个时间戳之后便开始计时，不考虑网络传输的耗时：

![format_png][]

图中的各项标注分别是（上面的时间线采用标准时间，与服务器和页面的时间均无关）：

start——页面项服务器发起AJAX请求时的时间。

www\_start——服务器响应页面的请求并返回时间戳给页面的时间。

pc\_start——页面接受到服务器返回的时间戳并开始计时的时间。

www\_end——服务器倒计时结束的时间。

pc\_end——页面倒计时结束的时间，同时也是用户在倒计时结束那一刻点击按钮的时间。

end——服务器接收到用户点击信息的时间。

可以看出，即使在倒计时结束的那一刻（也就是秒杀开始那一刻）用户就立即点击鼠标，也会比实际开始抢拍的时间（www\_end，即服务器倒计时结束的时间）晚一些（可以很容易的看出，这个时间差正好等于pc\_start - start，也就是AJAX从开始发送到接收到响应信息的耗时）。如果有些内行在页面倒计时结束前用脚本发送请求，那么其他用户可就亏大了。所以，我们要解决掉这个时间误差的问题。

2.为了解决时间误差的问题，我们将把页面倒计时的时间缩短一小截（由上面的分析可以得出，这一小截正好等于pc\_start - start），使得用户在倒计时结束时发送给服务器的抢拍信息正好在服务器倒计时结束时被接收到：

![format_png 1][]

图中的各项标注与Pic.1中相同（时间线采用标准时间，与服务器和页面的时间均无关），新增的两项标注的含义如下：

old\_pc\_end——在未对网络传输耗时进行处理的情况下pc\_end的时间。

old\_end——在未对网络传输耗时进行处理的情况下end的时间。

由Pic.2可见，网络传输耗时造成的时间误差已经完全被弥补了，弥补的方法是“将倒计时结束的时间提前pc\_start - start”。但是解决了网络传输耗时造成的误差问题，还有用户电脑时间和服务器时间不相同的问题，下面我们继续讨论。

3.用户的电脑时间和服务器时间一定是有差异的，甚至差几个时区，怎么解决这个问题呢？方法的要点如下：

A. 当页面接收到服务器返回的时间戳www\_t时，立即开始计时。

B. 当页面接收到服务器返回的时间戳www\_t时，立即计算本地时间和服务器返回的时间戳的时间差t=new Date().getTime() - www\_t\*1000。

C. 仍然使用new Date().getTime()来计时，而不是使用setInterval()函数（计时器很不稳定，误差也很大），但时间的显示与程序的逻辑必须基于本地时间和上一步（B中）求得的时间偏差t。

结论要点：

页面从接收到服务器响应的时间戳开始计时，计时的时长应减掉AJAX从发送到接收整个过程的耗时，计时过程则使用本地时间来实现（本地时间+时间偏差）。

有任何疑问或建议请留言，谢谢！

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> 
    
      <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>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDE1MDkvMjAxNTkxNjExNDE0OTMwNC5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDE1MDkvMjAxNTkxNjExNDIyNDk2NC5wbmc?x-oss-process=image/format,png