恒富网

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