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

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

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

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

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

  1. <span id="timebox">11:21:55</span> //第一次将服务器时间显示在这里
  2.  
  3. <script type="text/javascript">
  4.     $(function () {
  5.         var oTime = $("#timebox");
  6.         var ts = oTime.text().split(":", 3);
  7.         var tnums = [parseInt(ts[0]), parseInt(ts[1]), parseInt(ts[2])];
  8.         setInterval(function () {
  9.             tnums = getNextTimeNumber(tnums[0], tnums[1], tnums[2]);
  10.             showNewTime(tnums[0], tnums[1], tnums[2]);
  11.         }, 1000);
  12.  
  13.         function showNewTime(h, m, s) {
  14.             var timeStr = ("0" + h.toString()).substr(-2) + ":"
  15.                             + ("0" + m.toString()).substr(-2) + ":"
  16.                             + ("0" + s.toString()).substr(-2);
  17.             oTime.text(timeStr);
  18.         }
  19.  
  20.         function getNextTimeNumber(h, m, s) {
  21.             if (++s == 60) {
  22.                 s = 0;
  23.             }
  24.  
  25.             if (s == 0) {
  26.                 if (++m == 60) {
  27.                     m = 0;
  28.                 }
  29.             }
  30.  
  31.             if (m == 0) {
  32.                 if (++h == 24) {
  33.                     h = 0;
  34.                 }
  35.             }
  36.  
  37.             return [h, m, s];
  38.         }
  39.     });
  40. </script>
  1. 代码很简单在此就不多作说明(我上面只显示时分秒，大家也可以加上日期，加上日期可在当h==0时，直接从服务器获取一个日期或完整的时间，作为一次时间的校对)，不懂的可以在下面评论，我会及时回复的，然后按照这种思路来实现一下同步倒计时，首先说明一下，什么是同步倒计时，就是类似秒杀一样，设置一个结束时间，然后计算当前时间与结束时间之间间隔，而且必需保证在不同的电脑、浏览器上显示的倒计时时间均相同，实现代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>同步倒计时</title>
  5.     <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  6. </head>
  7. <body>
  8.     <span id="timebox">1天00时00分12秒</span> <!--假设：1天00时00分12秒是从服务器获取的倒计时数据-->
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             var tid = setInterval(function () {
  12.                 var oTimebox = $("#timebox");
  13.                 var syTime = oTimebox.text();
  14.                 var totalSec = getTotalSecond(syTime) - 1;
  15.                 if (totalSec >= 0) {
  16.                     oTimebox.text(getNewSyTime(totalSec));
  17.                 } else {
  18.                     clearInterval(tid);
  19.                 }
  20.  
  21.             }, 1000);
  22.  
  23.             //根据剩余时间字符串计算出总秒数
  24.             function getTotalSecond(timestr) {
  25.                 var reg = /\d+/g;
  26.                 var timenums = new Array();
  27.                 while ((r = reg.exec(timestr)) != null) {
  28.                     timenums.push(parseInt(r));
  29.                 }
  30.                 var second = 0, i = 0;
  31.                 if (timenums.length == 4) {
  32.                     second += timenums[0] * 24 * 3600;
  33.                     i = 1;
  34.                 }
  35.                 second += timenums[i] * 3600 + timenums[++i] * 60 + timenums[++i];
  36.                 return second;
  37.             }
  38.  
  39.             //根据剩余秒数生成时间格式
  40.             function getNewSyTime(sec) {
  41.                 var s = sec % 60;
  42.                 sec = (sec - s) / 60; //min
  43.                 var m = sec % 60;
  44.                 sec = (sec - m) / 60; //hour
  45.                 var h = sec % 24;
  46.                 var d = (sec - h) / 24;//day
  47.                 var syTimeStr = "";
  48.                 if (d > 0) {
  49.                     syTimeStr += d.toString() + "天";
  50.                 }
  51.  
  52.                 syTimeStr += ("0" + h.toString()).substr(-2) + "时"
  53.                             + ("0" + m.toString()).substr(-2) + "分"
  54.                             + ("0" + s.toString()).substr(-2) + "秒";
  55.  
  56.                 return syTimeStr;
  57.             }
  58.  
  59.         });
  60.     </script>
  61. </body>
  62. </html>

为了保证倒计时的精确度，我采用了先将倒计时时间间隔统一计算成秒，然后减1秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！

javascript小技巧：同步服务器时间、同步倒计时的更多相关文章

  1. [Jquery 插件]活动倒计时，可同步服务器时间，倒计时格式随意设置

    活动倒计时,可同步服务器时间,倒计时格式随意设置 使用说明 /* #活动倒计时,可同步服务器时间 startTime:起始时间 endTime:结束时间 format_str:字符模板 speed:倒 ...

  2. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  3. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...

  4. sql server小技巧-自动添加时间与主键自增长

    在敲机房收费系统的时候,遇到添加时间的时候总是通过vb端调用当前时间再添到sql server中,期间还有时因为添加时间格式的不统一导致一些小问题,现在才知道原来是自己孤陋寡闻,sql server ...

  5. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

  6. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

  7. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

  8. 常用的一些javascript小技巧

    (转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html

  9. Linux 自动同步服务器时间

    200 ? "200px" : this.width)!important;} --> 介绍 Linux服务器运行久时,系统时间就会存在一定的误差,本篇文章就来介绍怎样使服务 ...

随机推荐

  1. 树莓派(Raspberry Pi)搭建简单的lamp服务

    树莓派(Raspberry Pi)搭建简单的lamp服务: 1. LAMP 的安装 sudo apt-get install apache2 mysql-server mysql-client php ...

  2. 利用IIS应用请求转发ARR实现IIS和tomcat整合共用80端口

    现在网上流传的实现iis和tomcat共享80端口的方法是基于isapi_redirect插件实现的, 我的实现方法不同, 原理相似,具有更好的优点. 先说下基于isapi_redirect缺点,ja ...

  3. Blend 2015 教程 （二） 样式

    前一篇讲述了如何在新Blend中完成一个简单的带数据绑定的界面小例子,本篇将讲述一下,把View层和Style层分开,并搭建Style层框架的方法,并进行细节样式修改. 1. 在解决方案资源管理器面板 ...

  4. Silverlight中文本框添加回车事件后，换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

  5. [ZigBee] 9、ZigBee之AD剖析——AD采集CC2530温度串口显示

    1.ADC 简介 ADC 支持多达14 位的模拟数字转换,具有多达12 位有效数字位.它包括一个模拟多路转换器,具有多达8 个各自可配置的通道:以及一个参考电压发生器.转换结果通过DMA 写入存储器. ...

  6. WKInterfaceImage 无法更新图片的问题

    最近涉及到AppleWatch的相关项目,但有个奇怪问题无法解决,而且无法理解: 根据不同的用户操作,需要修改播放器的专辑图片. 不知道跟我的项目需求是不是有关系:我需要轮询共享空间,以拿取同步数据, ...

  7. Java基础类型总结

    最近一直在总结反思自己, 趁着现在请假在学校上课的空余时间,从基础开始重新温故学习下Java,充实下自己. 一.数据类型 从下图中,我们可以很清晰的看出Java中的类型,其中红色方框中的是Java的4 ...

  8. Stealth视频教程学习笔记（第一章）

    Stealth视频教程学习笔记(第一章) 本文是对Unity官方视频教程Stealth的学习笔记.在此之前,本人整理了Stealth视频的英文字幕,并放到了优酷上.本文将分别对各个视频进行学习总结,提 ...

  9. 鸟哥的Linux私房菜——基础学习篇 —— 笔记2

    at 语法 == 注意,输入at之后便进入命令行模式 ------- 不管怎么样,只会执行一次. [test @test test]# at [-m] TIME (输入工作指令)[test @test ...

  10. 我也说百度和google

    对于程序员,最好的老师恐怕还是百度或者google或一些专业的it社区.网站了罢! 之前曾听到这样的一句话, 文艺程序员用Google Scholar/Scirus/stackoverflow.普通程 ...