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

全屏阅读
  • 基本信息

有这样的一个需求,在终端一体机中实现实时动态显示时间如“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>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!