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 相关文章推荐
农历与西历对照
Sep 06 Javascript
js获取视频时长代码
Apr 10 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
交互式可视化js库gojs使用介绍及技巧
Feb 18 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 数组教程 定义数组
2009/10/23 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php xhprof使用实例详解
2019/04/15 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue按需加载实例详解
2019/09/06 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
Python 除法小技巧
2008/09/06 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
老同学聚会感言
2014/02/23 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
多人股份制合作协议书
2016/03/19 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python