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秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！

赞 (0)

相关推荐

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • JSP获取服务器时间以倒计时的形式在页面显示

    复制代码 代码如下: <%@ page language="java" import="java.util.*"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@ include fi

  • js 倒计时（高效率服务器时间同步）

    方案1:每次倒计时去服务端请求时间 //开启定时器 var timer = setInterval(function () { //执行请求,获取当前服务端时间并进行相应操作 }, 1000); 这个方案对于稍微有点经验的开发人员来说,都知道是不可取的.因为这会给服务器造成无法想象的压力,导致应用崩溃.在这个页面停留一分钟,那么请求就发送了60次,假如此时有100个人在访问这个页面,那么一分钟就有6000条请求,人数如果再增长,这绝对会造成不必要的服务器压力.并且这个方案的倒计时,也会存在很大的

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

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

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

  • JavaScript获取服务器时间的方法详解

    JavaScript获取服务器时间的方法详解

    本文实例讲述了JavaScript获取服务器时间的方法.分享给大家供大家参考,具体如下: Javascript是运行在客户端的脚本,我们一般都用new Date()来获取当前时间,但是得到的是客户端的时间,客户端时间是随意更改的,如果要做一个产品发布倒计时的话,客户端时间一改,就要闹笑话了.业务中需要用到服务器时间的场景还有很多,那么仅仅通过js怎么拿到服务器时间呢?事实上,只需要一个ajax请求就搞定,通过读取XMLHttpRequest对象的响应头里面的时间戳得到当前服务器时间! 原理就是这

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • 处理JavaScript值为undefined的7个小技巧

    前言 我刚刚开始学习JavaScript时,大约是八年前,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值. 他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true. 现在的大多数语言,像Ruby, Python or Java,他们有一个单独的空值(nil 或 null),这似乎才是一个合理的方式. 而在JavaScript里,当你要获取一个变量或对象(未初始化)的值时,js引擎会返回 un

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • 学习JavaScript一定要知道的3个小技巧

    目录 一.神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二.进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三.使用 .map()..reduce() 和 .filter() 前言: 通常在 Angular 或 React 项目中,code review 时看到一些老式的 JavaScript 代码,就会将开发人员归类为初学者.但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师.那么,让我们开始我们的旅程吧! 一.神奇的扩展运算符 扩展运

  • javascript实现获取服务器时间

    JS是在客户端运行的脚本,而不是运行在服务器上,通常来说,通过JS获取时间的时候获取到的时间是访客本地电脑上的时间,为了让网页上的时间不因访客电脑差异而不同,我们有必要直接JS获取服务器时间. 下面是完整的js获取服务器时间代码,是使用javascript获取服务器时间的完整实例,js动态刷新服务器时间. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=

  • 使用ntpdate工具校正linux服务器时间(实现方法)

    当Linux服务器的时间不对的时候,可以使用ntpdate工具来校正时间. 安装:yum install ntpdate ntpdate简单用法: # ntpdate ip # ntpdate 210.72.145.44 以下是一些可用的NTP服务器地址: Name IP Location 210.72.145.44 210.72.145.44 中国(国家授时中心) 133.100.11.8 133.100.11.8 日本(福冈大学) time-a.nist.gov 129.6.15.28 NI

  • Python语言编写电脑时间自动同步小工具

    Python语言编写电脑时间自动同步小工具

    话不多说,小工具需求如下: 功能需求 -- 电脑开机后自动执行时间同步 非功能需求 -- 安装执行简单,无需安装额外环境 一.代码实现 基于以上需求,思路如下:访问网络获取北京时间,然后调用命令行来设置系统时间.程序写成Windows Service,并设置为开机自动运行.正好前段时间在学习Python,所以打算用Python来写这个工具.具体代码如下: 获取网络时间 复制代码 代码如下: def getBeijinTime():     """  获取北京时间     &q

  • JavaScript markdown 编辑器实现双屏同步滚动

    JavaScript markdown 编辑器实现双屏同步滚动

    目录 前言 百分比滚动 双屏同时渲染占用面积大的元素 赋上一个索引 踩坑 前言 由于一直在使用 markdown 编辑器写技术文章,所以对于编写体验很敏感.我发现各大社区的 markdown 编辑器基本都有同步滚动功能.只不过有些做得好,有些做得马马虎虎.出于好奇,我就打算自己亲自实现一下这个功能. 思考了一段时间,最后想出来了三种方案: 百分比滚动 双屏同时渲染占用面积大的元素 每一行的元素都赋上一个索引,根据索引来精确同步每一行的滚动高度 百分比滚动 假设现在正在滚动 a 屏,那 a 屏的滚

随机推荐