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调用WebServices的方法和4个实例
May 06 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
前端性能优化建议
2020/09/17 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
深入了解Python中pop和remove的使用方法
2018/01/09 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python绘制封闭多边形教程
2020/02/18 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python在地图上画比例的实例详解
2020/11/13 Python
用python批量下载apk
2020/12/29 Python
在校生党员自我评价
2013/09/25 职场文书
学生操行评语大全
2014/04/24 职场文书
预防传染病方案
2014/06/14 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS