基本思路是加载页面时首先与服务器进行时间同步，然后在这个时间的基础上每秒刷新页面显示时间

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>前端获取服务器时间并更新</title>
    6. </head>
    7. <body>
    8. <p id="time"></p>
    9. </body>
    10. <script>
    11.     var i = 0;
    12.     var sysTime = null;
    13.     //每秒更新页面显示时间
    14.     var int = self.setInterval("handle()", 1000);
    16.     function handle() {
    17.         if (i == 0) {
    18.             synchronization();
    19.         } else {
    20.             time();
    21.         }
    22.         i++;
    23.     }
    25.     //本地计算时间
    26.     function time() {
    27.         var curDate = new Date(sysTime);
    28.         ;
    29.         curDate.setSeconds(curDate.getSeconds() + 1);
    30.         sysTime = curDate;
    31.         document.getElementById("time").innerHTML = "服务器时间：" + curDate.getFullYear() + "-" + (curDate.getMonth() + 1) + "-" + curDate.getDate() + " " + curDate.getHours() + ":" + curDate.getMinutes() + ":" + curDate.getSeconds();
    32.     }
    34.     //同步服务器时间
    35.     function synchronization() {
    36.         var xhr = new XMLHttpRequest();
    37.         if (!xhr) {
    38.             xhr = new ActiveXObject("Microsoft.XMLHTTP");
    39.         }
    40.         xhr.open("HEAD", location.href, true);
    41.         xhr.onreadystatechange = function () {
    42.             var time = null,
    43.                 curDate = null;
    44.             if (xhr.readyState == 2) {
    45.                 // 获取响应头里的时间戳
    46.                 time = xhr.getResponseHeader("Date");
    47.                 curDate = new Date(time);
    48.                 sysTime = curDate;
    49.                 document.getElementById("time").innerHTML = "服务器时间：" + curDate.getFullYear() + "-" + (curDate.getMonth() + 1) + "-" + curDate.getDate() + " " + curDate.getHours() + ":" + curDate.getMinutes() + ":" + curDate.getSeconds();
    50.             }
    51.         }
    52.         xhr.send(null);
    53.     }
    54. </script>
    55. </html>

    参考：https://www.cnblogs.com/weekend001/p/3654084.html