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多浏览器捕捉回车事件代码
Jun 22 Javascript
了解一点js的Eval函数
Jul 26 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
JS实现点击掉落特效
Jan 29 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP中创建并处理图象
2006/10/09 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PDO::quote讲解
2019/01/29 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python实现两张图片的像素融合
2019/02/23 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
详解python中docx库的安装过程
2019/11/08 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年前台个人工作总结
2015/04/03 职场文书