当前位置: 首页 > 编程笔记 >

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

卫弘图
2023-03-14
本文向大家介绍javascript同步服务器时间和同步倒计时小技巧,包括了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秒再重新生成时间格式,当然也可以按照上面时间同步的例子,直接进行时间减少,方法很多,我这个不一定是最优的,欢迎大家交流,谢谢!

 类似资料:
  • 问题内容: 我一直对JavaScript始终是异步的印象。但是,我了解到在某些情况下不是这样(即DOM操作)。关于何时何时同步以及何时异步,有什么好的参考?jQuery会完全影响吗? 问题答案: JavaScript始终是同步的并且是单线程的。如果您正在页面上执行JavaScript代码块,则该页面上当前将不会执行其他JavaScript。 JavaScript仅在可以进行Ajax调用的意义上是异

  • 本文向大家介绍详解linux ntp服务器时间同步设置,包括了详解linux ntp服务器时间同步设置的使用技巧和注意事项,需要的朋友参考一下 linux ntp服务器时间同步设置 时间同步这个需求在很多地方都有。比如安装cm和cdh的话,需要ntp时间同步,否则会出现红色警告 这里主要是设置一台服务器作为主服务器,让其他机器同步这台机器的时间,而且是配置的本地时间,没有同步internet时间,

  • 多个同步服务器 Since you have full control of express instance lifecycle, it's not a problem to create a few multiple simultaneous servers (e.g. both HTTP & HTTPS). Example: 因为你已经可以完全控制express实例的生命周期了,所以创建多个

  • 本文向大家介绍同步和异步计数器之间的区别,包括了同步和异步计数器之间的区别的使用技巧和注意事项,需要的朋友参考一下 众所周知,在数字电子学中,计数器是由一系列触发器组成的顺序逻辑电路,用于按负或正边沿跳变来计数输入出现的次数。现在,基于触发器的触发方式,我们可以区分同步计数器和异步计数器。 以下是同步计数器和异步计数器之间的重要区别。 序号 键 同步计数器 异步计数器 1 触发 顾名思义,在使用同

  • 我有一个客户端服务器的情况,每一方都在测量时间,但似乎有一个问题,即测量的时间不匹配。长话短说,这个想法是有一个倒计时,之后程序需要做事情。我在服务器端测量这个。但是,倒计时需要显示,所以我所做的是在客户端单独运行它。最终结果是,当服务器发送消息时,客户端显示为23秒,该消息表明时间倒计时为10分钟。 客户端为XNA,代码: 然后从可用时间中减去计时器,并显示出来。在服务器端,这种情况正在发生:

  • 我理解同步服务器和异步服务器之间的区别,但是我想知道,如果有这两种情况,哪一种更适合异步服务器还是同步服务器? > 同步:写入调用将被阻塞,直到消息准备好从内部完成队列通过线路发送。异步:写入调用立即返回,我们需要等待完成队列。在同步服务器中,如果我们添加队列,该队列基本上为evry写入调用和其他线程填充,并将其耗尽并执行stream.write然后性能将相同? 同步:gRPC内部创建线程池,线程