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  ,如需转载请自行联系原作者

相关文章
|
9天前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
1月前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
21小时前
|
缓存 JavaScript 前端开发
js开发代码片段与小技巧
js开发代码片段与小技巧
|
21小时前
|
JavaScript
JS简写小技巧让代码更漂亮
JS简写小技巧让代码更漂亮
|
4天前
|
存储 运维 数据挖掘
服务器数据恢复—raid5热备盘同步失败导致阵列崩溃的数据恢复案例
某品牌DS5300存储,包含一个存储机头和多个磁盘柜,组建了多组RAID5磁盘阵列。 某个磁盘柜中的一组RAID5阵列由15块数据盘和1块热备硬盘组建。该磁盘柜中的某块硬盘离线,热备盘自动替换并开始同步数据,在热备硬盘同步数据的过程中,又有一块硬盘出现问题离线,数据同步失败,该RAID5阵列失效,卷无法挂载访问。
|
17天前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
21 1
|
21天前
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
156 4
|
2天前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
6 0
|
26天前
|
JSON JavaScript 前端开发
使用Node.js搭建服务器
使用Node.js搭建服务器
20 1
|
7天前
|
弹性计算 监控 JavaScript
云服务器 ECS产品使用问题之Node.js项目部署成功后无法通过公网IP+端口号访问,是什么导致的
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。