iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 服务器 >javascript实现同步服务器时间、同步倒计时
  • 328

0
分享到

javascript实现同步服务器时间、同步倒计时

2024-04-02 19:04:59 328人浏览 安东尼
摘要

这篇文章主要介绍“javascript实现同步服务器时间、同步倒计时”，在日常操作中，相信很多人在javascript实现同步服务器时间、同步倒计时问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方

这篇文章主要介绍“javascript实现同步服务器时间、同步倒计时”，在日常操作中，相信很多人在javascript实现同步服务器时间、同步倒计时问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是***的，欢迎大家交流，谢谢！

到此，关于“javascript实现同步服务器时间、同步倒计时”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript实现同步服务器时间、同步倒计时

本文链接: https://www.lsjlt.com/news/66316.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • javascript实现同步服务器时间、同步倒计时
    这篇文章主要介绍“javascript实现同步服务器时间、同步倒计时”，在日常操作中，相信很多人在javascript实现同步服务器时间、同步倒计时问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...
    99+
    2024-04-02
  • Centos服务器时间同步
    前言 服务器时间同步有多种情况，不同情况处理方式也有差异。比如，可以连外网，则可直接使用ntpdate定时同步互联网的时间服务器时间（如阿里的时间服务器ntp.aliyun.com）。 如果不能连外网，则需要指定一台服务器当作时间服务器。...
    99+
    2023-08-31
    服务器 centos 运维
  • Linux服务器时间同步怎么实现
    这篇文章主要讲解了“Linux服务器时间同步怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Linux服务器时间同步怎么实现”吧！一、server端安装ntp校时包，修改独立主机rm ...
    99+
    2023-06-16
  • Windowsserver2012NTP时间同步的实现
    NTP 服务【 Network Time Protocol （ NTP ）】是用来使计算机时间同步化的一种协议，它可以使计算机 对其服务器或时钟源（如石英钟，GPS 等等 ) 做同步...
    99+
    2024-04-02
  • NTP时间同步
    NTP服务器 1. 概念 NTP服务器【Network Time Protocol（NTP）】是用来使计算机时间同步化的一种协议，它可以使计算机对其服务器或时钟源（如石英钟，GPS等等)做同步化，它可...
    99+
    2023-09-14
    服务器 linux centos
  • 实现【Linux--NTP 时间同步服务搭建】
    实现【Linux--NTP 时间同步服务搭建】 🔻 前言🔻 一、NTP 校时🔰 1.1 NTP 服务校时与 ntpdate 校时的区别...
    99+
    2023-08-31
    linux 运维 NTP 时间同步服务搭建 ntpdate ntp
  • NTP（时间同步服务器）：国内常用的NTP时间源同步服务器汇总
    使用以前请先ping相应的域名查看网络是否可达，和相应的访问速度 ntp.ntsc.ac.cn   中国国家授时中心 cn.ntp.org.cn     中国授时 阿里云NTP时间源服务器 ntp1.aliyun.com ntp2.aliy...
    99+
    2023-09-20
    服务器 网络 运维
  • Windows 时间同步服务器设置
    目录 1、NTP服务端配置： 1.1  修改注册表 1.2 启动w32time服务 1.3 修改组策略 1.4 放通端口，完成服务端配置 2. 客户端配置 1、NTP服务端配置： 1.1  修改注册表 WIN+R 打开运行，...
    99+
    2023-09-17
    服务器 windows 运维
  • linux两台服务器时间同步
    让Linux两台服务器时间同步，可以通过网络时间协议（NTP）来实现。NTP是一种可以在网络时间服务器和客户端之间同步时间的协议，通过使用NTP，可以保证网络中的所有计算机时间的准确性。 在服务器1上...
    99+
    2023-09-16
    服务器 linux github
  • 如何在PHP和JavaScript之间实现实时同步？
    在现代的Web开发中，PHP和JavaScript是两种不可或缺的编程语言。PHP通常用于服务器端编程，而JavaScript则用于客户端编程。在某些情况下，我们需要在PHP和JavaScript之间实现实时同步，以便使网站的用户界面更加友...
    99+
    2023-08-13
    同步 实时 javascript
  • linux中怎么实现时间同步
    这期内容当中小编将会给大家带来有关linux中怎么实现时间同步，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。方法1：与一个已知的时间服务器同步代码如下:ntpdate time.nist.gov其中 ti...
    99+
    2023-06-13
  • 同步阿里云服务器时间实现准确的时间管理
    阿里云服务器是许多企业进行数据存储、计算和应用部署的首选平台。然而，由于地理位置、网络环境、硬件设备等多方面因素，阿里云服务器的时间可能会出现误差。为了确保工作的准确性，同步阿里云服务器时间是非常重要的。本文将详细介绍如何实现阿里云服务器时...
    99+
    2023-10-29
    时间 阿里 准确
  • 时间同步服务器怎么设置
    时间同步服务器的设置步骤如下：1. 选择一台计算机作为时间同步服务器，一般选择网络中心服务器或域控制器。2. 在该计算机上打开命令提...
    99+
    2023-06-08
    时间同步服务器 服务器
  • vue实现同时设置多个倒计时
    本文实例为大家分享了vue实现同时设置多个倒计时的具体代码，供大家参考，具体内容如下 html如下： <div class="home"> <tbody...
    99+
    2024-04-02
  • rsync实时同步
    与传统的cp、tar备份方式相比，rsync具有安全性高、备份迅速、支持增量备份等优点，通过rsync可以解决对实时性要求不高的数据备份需求，例如定期的备份文件服务器数据到远端服务器，对本地磁盘定期做数据镜像等。192.168.0.1 源服...
    99+
    2023-06-05
  • 阿里云服务器授时教程实现精准时间同步
    随着云计算的普及，越来越多的企业和个人开始使用阿里云服务器。其中，时间同步是云计算中非常重要的一个环节，它可以保证服务器的正常运行和数据的安全性。本文将详细介绍如何在阿里云服务器上实现精准的时间同步。 一、什么是时间同步时间同步是指计算机系...
    99+
    2023-12-11
    阿里 精准 服务器
  • linux集群时间同步
    时间主机(服务器端)首先检查系统中是否安装ntp包rpm -q ntp ----若没有执行yum -y install ntp 进行安装再执行上面命令进行检查查看ntp是否设置为开启启动状态：systemctl is-enabled ntp...
    99+
    2023-06-05
  • ubuntu如何同步时间
    ubuntu同步时间的方法：打开终端输入以下命令安装ntpdate工具。sudo apt-get install ntpdate再输入命令设置系统时间与网络时间同步。sudo ntpdate cn.pool.ntp.org最后输入命令将时间...
    99+
    2024-04-02
  • Linux 网络时间同步
    Linux的时间分为System Clock（系统时间）和Real Time Clock （硬件时间，简称RTC）。系统时间：指当前Linux Kernel中的时间。硬件时间：主板上有电池供电的时间。查看系统时间的命令： #dat...
    99+
    2023-06-05
  • NTP时钟同步服务器
    目录 一、什么是NTP？ 二、计算机时间分类 三、NTP如何工作？ 四、NTP时钟同步方式（linux） 五、时间同步实现软件（既是客户端软件也是服务端软件） 六、chrony时钟同步软件介绍 七、...
    99+
    2023-10-23
    服务器 运维 网络协议 linux centos vim 笔记
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作