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> 

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

本文转自梦在旅途博客园博客，原文链接：http://www.cnblogs.com/zuowj/p/4812771.html ，如需转载请自行联系原作者

javascript小技巧：同步服务器时间、同步倒计时相关推荐

网页同步服务器时间长,javascript同步服务器时间和同步倒计时小技巧
之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一 ...
客户端如何修改服务器时间设置在哪里看,客户端同步服务器时间设置在哪里
客户端同步服务器时间设置在哪里内容精选换一换在创建数据库连接之后,才能使用它来执行SQL语句操作数据.JDBC提供了三个方法,用于创建数据库连接.DriverManager.getConnect ...
自动售卖软件服务器,连锁收银系统中销售商品时自动同步服务器时间
在使用连锁版收银软件时,大家可能都会遇到一个头疼的问题:多台收银机电脑时间不一致,造成数据统计时出现偏差.一个较常见的现象是由于某种原因(中毒,主板电池没电,人为误操作等)导致电脑时间错误,比如目前时 ...
同步服务器时间 yum -y install ntpdate ntpdate -u cn.pool.ntp.org
同步服务器时间 yum -y install ntpdate ntpdate -u cn.pool.ntp.org
Linux同步服务器时间
Linux同步服务器时间 CentOS安装ntp时间同步服务方式一 crontab 同步时间命令:执行同步命令,服务端先需要启动ntpd服务,客户端不需要 ntpdate 192.168.1.100 ...
【译】5 个你需要知道的 JavaScript 小技巧
JavaScript 是目前最流行的编程语言之一.就像其他任何编程语言一样,它也有很多小技巧,从今天开始你就可以使用它们大多数程序员都应该每天训练这些小技巧,直到熟能生巧. 在这篇文章中,我们将一起 ...
javascript小技巧-500例
搜集的一些javascript小技巧!事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCap ...
常用的一些javascript小技巧(收藏http://www.car371.com/article.asp?id=13)
常用的一些javascript小技巧作者:隆轩日期:2005-12-21 字体大小: 小中大 //事件源对象 event.srcElement.tagName event.srcElement ...
一些学习中常被忽略的 JavaScript 小技巧
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 作者:冷星 https://segmentfault.com/a/1190000018897633 ...
javascript小技巧！
搜集的一些javascript小技巧! 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCa ...

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

javascript小技巧：同步服务器时间、同步倒计时相关推荐

最新文章

热门文章