华山资源网

Javascript实现商品秒杀倒计时（时间与服务器时间同步）
网络编程 2024/11/19 佚名
3 1

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

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

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

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

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

过程分析：

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

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


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

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

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

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

www_end——服务器倒计时结束的时间。

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

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

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

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

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

图中的各项标注与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="/UploadFiles/2021-04-02/jquery-1.4.4.min.js">


为了保证倒计时的精确度，我采用了先将倒计时时间间隔统一计算成秒，然后减1秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com