欢迎您来到,李雷博客 | PHP博客        登录  |  注册

js实时动态显示PHP服务器时间且不用Ajax循环查询获取的方法

更新:2021-02-28 15:01:03
人气:1363
来源:本站原创
A+

有这样的一个需求,在终端一体机中实现实时动态显示时间如“2021年2月28日 14:46:40 星期天”,而且要每秒跳动一次。但是大家都知道,JS显示的本地计算机的时间,而应用中要显示服务器的时间才能保证应用程序的计时准确性。通常想到的办法就是用JS和AJAX定时每秒一次循环与服务器通讯获取实时时间,这样可以实现但无形中增加了频繁通讯的次数,也有可能因为网络或特殊情况造成JS循环脚本的阻塞,一但阻塞,时间可能会每次跳2秒或更多,产生不友好的波动数据。

所以今天分享一则特别简单的方法,就是首次加载页面时获取PHP服务器时间,用time()获取服务器时间戳做为计时的基准时间,然后JS在此时间基础上动态每秒显示时间,再每隔指定S时间(比如30秒或1分钟),重新获取服务时间用于校准,既避免了每秒与服务器通讯,又能减小本地计算机与服务器时间的误差。

        //首次获取服务器时间,然后JS在此时间基础上动态显示时间,再每隔指定S时间,重新获取服务时间,既避免了每秒与服务器通讯,又能减小本地计算机与服务器时间的误差。
        var datecuo = <?= time() ?>* 1000;//首次用PHP获取服务器的时间做为基础时间
        var date_count = 0;
        function time() {
            var vWeek, vWeek_s, vDay;
            vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            datecuo = datecuo + 1000;
            date_count++;
            var date = new Date(datecuo);
            year = date.getFullYear();
            month = date.getMonth() + 1;
            day = date.getDate();
            hours = date.getHours();
            minutes = date.getMinutes();
            seconds = date.getSeconds();
            vWeek_s = date.getDay();

            if (hours < 10) { hours = '0' + hours; }
            if (minutes < 10) { minutes = '0' + minutes; }
            if (seconds < 10) { seconds = '0' + seconds; }

            $("#nowtime").html(year + "年" + month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds + " " + vWeek[vWeek_s]);
            
            //以计数的方式,60次即1分钟,用AJAX从服务器head头信息的date中获取一次时间,进行较准
            if (date_count >= 60) {
                var newdate = new Date($.ajax({ type: "HEAD", async: false }).getResponseHeader('Date'));
                var newt_shijianchuo = (new Date(newdate)).getTime() / 1000;
                datecuo= newt_shijianchuo*1000
                date_count = 0;
            }
        };
        setInterval("time()", 1000);

HTML页面:

<div>当前时间:<span id="nowtime">---</span></div>
推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4