之前在网上看到有人提问，如何在页面上同步显示服务器的时间，其实实现方法有几种，可能一般人立马就想到可以使用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秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！

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. Orchard Application Host

    https://orchardapphost.codeplex.com/ 近一步将Orchard框架发扬光大,还可以用来作为非Web应用的框架,如控制台程序,同时使用到Orchard框架的特性: 1. ...

  2. Restful.Data v1.0 - 轻量级数据持久层组件, 正式开源发布了

    经过几个星期的优化调整,今天 Restful.Data 正式开源发布. 源码地址:https://github.com/linli8/Restful 今天不写那么多废话了,还是重新介绍一下 Restf ...

  3. Windows Server 2008更改远程桌面端口号

    windows 2008远程桌面端口默认是用的是3389端口,但是由于安全考虑,经常我们安装好系统后一般都会考虑把原来的3389端口更改为另外的端口. 更改过程: 打开注册表: 运行regedit 找 ...

  4. 【腾讯Bugly干货分享】TRIM：提升磁盘性能，缓解Android卡顿

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处.在业内,Android 手机一直有着 ...

  5. Sensor（ORIENTATION）

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  6. Java多线程3：Thread中的静态方法

    Thread类中的静态方法 Thread类中的静态方法表示操作的线程是"正在执行静态方法所在的代码块的线程".为什么Thread类中要有静态方法,这样就能对CPU当前正在运行的线程 ...

  7. 冲刺阶段 day12

    项目进展 周二我们将专业管理部分又继续做了完善,之前漏掉的几项功能也都在熟能生巧中编写的越来越顺畅,但还差最后一点数据库部分没能实现,我们会尽快完成. 存在问题 还是与数据库的连接上出现问题,部分不能 ...

  8. HTML目录生成工具

    目录 内容简介 工具代码 使用方法 工具改进 内容简介 园子里面很多博主都会为自己的博文创建目录,方便大家浏览.我很好奇大家是怎么做的,是不是有自动生成目录的工具可以推荐一下(我知道word可以,但是 ...

  9. SQL Server 性能优化之——T-SQL 临时表、表变量、UNION

    这次看一下临时表,表变量和Union命令方面是否可以被优化呢? 阅读导航 一.临时表和表变量 二.本次的另一个重头戏UNION 命令 一.临时表和表变量 很多数据库开发者使用临时表和表变量将代码分解成 ...

  10. 趣味C程序-HelloWord

    说明:刚才写了一个基础的helloWord程序(很早以前从其他地方收集的.),本以为群里面的人是可以答对了,但是我错了,没有人.他们的错误往往被程序的外表给蒙蔽了. 很多人的回答是0.如果你仔细看的话 ...