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秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！
javascript小技巧：同步服务器时间、同步倒计时的更多相关文章
- [Jquery 插件]活动倒计时，可同步服务器时间，倒计时格式随意设置
活动倒计时,可同步服务器时间,倒计时格式随意设置 使用说明 /* #活动倒计时,可同步服务器时间 startTime:起始时间 endTime:结束时间 format_str:字符模板 speed:倒 ...
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
- sql server小技巧-自动添加时间与主键自增长
在敲机房收费系统的时候,遇到添加时间的时候总是通过vb端调用当前时间再添到sql server中,期间还有时因为添加时间格式的不统一导致一些小问题,现在才知道原来是自己孤陋寡闻,sql server ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 常用的一些javascript小技巧
(转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html
- Linux 自动同步服务器时间
200 ? "200px" : this.width)!important;} --> 介绍 Linux服务器运行久时,系统时间就会存在一定的误差,本篇文章就来介绍怎样使服务 ...
随机推荐
- sqlserver各备份解释
1)完全备份 ------------------------------------------- (1)是备份的基准.在做备份时第一次备份都建议使用完全备份. (2)完全备份会备份数据库的所有数据 ...
- EasyDarwin不能保存HLS列表的解决方案
官网: easydarwin.org 安装过程 http://doc.easydarwin.org/EasyDarwin/README/ 安装客户端,iVMS-4200 客户端,并运行. 在设备管理里 ...
- [问题解决]安装 SQL Server 无法开启NetFx3.5 的错误
谷歌了一下,该问题是由于系统中缺少.Net3.5相关特性造成的.需要手动安装一下3.5的环境 解决办法: Windows 徽标键+R打开运行窗口 输入Dism /online /enable-feat ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发（一）Hello World!
ReactMixhttps://github.com/xueduany/react-mix自从昨天发布起来,得到了不少小伙伴的热捧,很高兴帮助大家解决了憋在心中很久的问题“如果我只会HTML,Css, ...
- 微软承诺将在今年的 Visual C++ 更新中加入 Clang 编译器
微软最近发布将在2015年11月 Visual C++ 更新中加入 Clang 编译器 ,Clang 开源编译器以相比GCC更快的编译速度和更优的错误提示著称. Clang关于C,C++,及Objec ...
- sonne_game网站开发02spring+mybatis框架搭建
从最开始搭框架谈起,而且,我不仅仅会讲how,还会努力讲why.因为对于web开发,由于有太多好的框架.组件.工具,使得how往往不是那么深刻,背后的why更值得专研.如果有初学者关注我这个系列,也一 ...
- Java Socket Server的演进 (一)
最近在看一些网络服务器的设计, 本文就从起源的角度介绍一下现代网络服务器处理并发连接的思路, 例子就用java提供的API. 1.单线程同步阻塞式服务器及操作系统API 此种是最简单的socket服务 ...
- vi 卡住怎么办
http://zhidao.baidu.com/question/93283359.html ---------- 我貌似好像按了ctrl+s... 用惯了windows人,会习惯性地按Ctrl+S来 ...
- Atitit 项目管理（5）----------后勤管理与工具链支持管理
Atitit 项目管理(5)----------后勤管理与工具链支持管理 1.1. keyword1 1.2. 15个辅助软件1 1.3. 公共模块管理(100个即可)2 1.4. 第三方类库表2 1 ...
- Web信息架构——设计大型网站（第3版）（久负盛名经典再现，信息架构设计领域基石之作！）
Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!) [美]]Peter Morville(彼得·莫维尔) Louis Rosenfeld(路易斯·罗森菲尔德) ...