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

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

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

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

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

11:21:55 //第一次将服务器时间显示在这里

$(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];

}

});

代码很简单在此就不多作说明(我上面只显示时分秒,大家也可以加上日期,加上日期可在当h==0时,直接从服务器获取一个日期或完整的时间,作为一次时间的校对),不懂的可以在下面评论,我会及时回复的,然后按照这种思路来实现一下同步倒计时,首先说明一下,什么是同步倒计时,就是类似秒杀一样,设置一个结束时间,然后计算当前时间与结束时间之间间隔,而且必需保证在不同的电脑、浏览器上显示的倒计时时间均相同,实现代码如下:

同步倒计时

1天00时00分12秒

$(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;

}

});

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

网页同步服务器时间长,javascript同步服务器时间和同步倒计时小技巧相关推荐

  1. 时间计算题100道_高考物理答题小技巧(选择题、实验题、计算题)

    高考里,物理是说难也容易得分的科目.其实就三个大题,选择题,实验题和计算题,今天让我们一起看看高考物理这些题型答题时的一些小技巧吧! 选择题 1.注意看清题目,比如选择的是错误的.可能的.不正确的.或 ...

  2. 怎么获取网站服务器时间长,如何获取服务器的时间(包括毫秒或(1/100秒))?...

    首先,我试过了: string URL = "http://google.com"; System.Net.HttpWebRequest rq2 = (System.Net.Htt ...

  3. 使命召唤ol同步显示服务器,使命召唤OL—关于画面设置的几个小技巧

    原标题:使命召唤OL-关于画面设置的几个小技巧 众所周知<使命召唤OL>是一款真3D-FPS射击对抗类游戏.这款游戏的最低配合虽说仅要求内存1G以上,显存256MB.但你不会设置上的优化, ...

  4. WIN7系统电脑开机时间长 怎么缩短开机时间?

    电脑在使用过程中,比如卸载安装软件以及上网产生大量的垃圾导致我们的电脑会越来越慢,开机时间越来越长,怎么办? 第一步: 打开 开始,在搜索框内输入msconfig,然后回车:或者使用组合键" ...

  5. android 编译时间长,关于AS编译时间过长的问题

    针对打包编译时间太长的解决方法: 1.尽量使用implementation 依赖配置 2.针对测试调试可以关闭lint lint是个耗时大户,而这个Lint Task一般在Debug的时候是不需要的, ...

  6. 什么硬盘保存时间长 硬盘的保存时间

    1.硬盘分为机械硬盘和固态硬盘.固态硬盘可以说是神器,多少人的老电脑就是被固态硬盘给"救活"的.固态硬盘指的是用固态电子存储芯片阵列制成的硬盘,用的就是存储芯片,所以读取速度可以非 ...

  7. android app存活时间长,app 在后台时间过长被杀死,及时重启

    大家肯定会遇到过app退到后台,同时开启很多其他的应用,这时可能会造成我们的app因内存不足而导致进程被杀死,这时我们在从后台返回我们的app时,就会出现问题,特别是用到Application里面存储 ...

  8. linux时间老是跳快6分钟,Linux超省时小技巧,让你原来要十分钟解决的问题现在只用一秒钟...

    您是否在充分利用Linux?对于许多Linux用户而言,有许多有用的功能似乎可以节省时间.有时,这些省时的提示和技巧成为了需要.它们可以帮助您使用相同的命令集提高功能的效率. 这是每个Linux用户都 ...

  9. 一天测血压的最佳时间_一天中哪个时间测血压更准一点?牢记降压小技巧,血压逐步降...

    现在的人,不少人都市患上高血压,不仅仅是老人,另有许多的年轻人也会有血压偏高的情况,血压高,给身体带来的影响也多. 因血压的偏高,会加重血管的肩负,体内的其他部位也会受到影响,血管不顺畅,可能还会引起 ...

最新文章

  1. 为什么MobileNet的参数这么少
  2. Python-练习7
  3. pb 执行存储过程带参数_数据库存储过程
  4. Win10卸载python总是提示error2503失败各种解决办法
  5. C语言程序设计答案黄保和编,C语言程序设计答案(黄保和编)第5章.pdf
  6. 极客无极限 一行HTML5代码引发的创意大爆炸
  7. mysql基础之四:int(M)中M的含义
  8. Eclipse 插件管理
  9. 这么清晰的帮助手册,AppCube 二次体验
  10. 肺癌救星:易瑞沙(吉非替尼)疗效及复查时间
  11. 智能电视以及机顶盒屏幕截取的方法
  12. 彗星http_彗星介绍
  13. 墨尔本大学计算机qs排名,2020年墨尔本大学世界排名(QS排名、专业排名)
  14. Python机器学习12——神经网络
  15. 通用U盘启动盘制作工具 V2.0(全能版)
  16. #综合面经#同主题阅读:四个月骑驴找马终于结束,发面经回馈本版
  17. 2waySSL数字证书
  18. idea文件图标变了颜色了怎么处理?
  19. 亿级流量电商详情页系统实战-9.搭建主从复制
  20. 链游 | COCOS-加密骑士团游戏心得

热门文章

  1. 华为可以最先用上鸿蒙的机型,华为Mate40系列最先用上鸿蒙2.0,8 256G卖6999元,等吗?...
  2. Oracle根据excel创建新表,从Oracle数据库创建Excel电子表格
  3. c++调用mxnet模型做预测
  4. eclipse 或 sts 常用设置
  5. 如何提升做报表的效率?
  6. Google服务和软件大全07版
  7. 字符串排序(20 分)
  8. 马云老婆张瑛:他能做很多帅男人做不了的事
  9. GAME Kit开发记录
  10. Java 三目运算符细节详解