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


Posted in Javascript onSeptember 24, 2015

之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间、同步倒计时,却不占用服务器太多资源,下面我给写实现的思路:

第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页面上(比如:显示在ID为timebox span中)

第二步,设置一个每隔一秒就计算新的时间(新时间以服务器时间为初始值,然后每隔一秒累加一秒并生成新的时间)

第三步,显示第二步计算的时间

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

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

<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 相关文章推荐
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 #Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 #Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 #Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 #Javascript
You might like
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
drupal 代码实现URL重写
2011/05/04 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python正则简单实例分析
2017/03/21 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python将字典转换为XML的方法
2020/08/01 Python
python编写实现抽奖器
2020/09/10 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
七匹狼男装广告词
2014/03/21 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
临时租车协议范本
2014/09/23 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android