开发者社区> 技术小牛人> 正文

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

简介:
+关注继续查看

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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时,直接从服务器获取一个日期或完整的时间,作为一次时间的校对),不懂的可以在下面评论,我会及时回复的,然后按照这种思路来实现一下同步倒计时,首先说明一下,什么是同步倒计时,就是类似秒杀一样,设置一个结束时间,然后计算当前时间与结束时间之间间隔,而且必需保证在不同的电脑、浏览器上显示的倒计时时间均相同,实现代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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秒再重新生成时间格式,当然也可以按照上面时间同步的例子,直接进行时间减少,方法很多,我这个不一定是最优的,欢迎大家交流,谢谢!

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
LeetCode在既定时间做作业的学生人数使用JavaScript解题|前端学算法
LeetCode在既定时间做作业的学生人数使用JavaScript解题|前端学算法
17 0
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
104 0
JavaScript:获取当前日期时间的字符串格式
JavaScript:获取当前日期时间的字符串格式
44 0
js时间排序函数(升序,降序)
js时间排序函数(升序,降序)
56 0
js获取当地时间并且拼接时间格式的三种方式
js获取当地时间并且拼接时间格式,在stackoverflow上有人在问,查了资料,各种方法将时间格式改成任意自己想要的样式。
42 0
JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化
JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化
335 0
Day.js轻量级 JavaScript 时间日期处理库可替代Moment.js
Day.js轻量级 JavaScript 时间日期处理库可替代Moment.js
58 0
JavaScript获取当前日期时间及其它扩展操作(代码实现)
JavaScript获取当前日期时间及其它扩展操作(代码实现)
75 0
js 计算两个时间的时间差
如题,就像题目说的需要计算出时间差,虽然不太难,但这个需求经常会在项目中遇到的,我在这边做一下整理,希望能够尽量全的整理出来。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 计算时间差原理: getTime()方法 方法定义: getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。 通常我们计算时间差都是通过获取两个时间数据,然后分别使用getTime()方法返回与固定的1970 年 1 月 1 日的时间差,通过对返回毫秒数的差,换算成时间单位,得出两个时间的时间差。 开始操作:
407 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载