【JS】页面显示服务器时间

最新推荐文章于 2024-05-17 14:01:49 发布

重瞳Tech

最新推荐文章于 2024-05-17 14:01:49 发布

阅读量797

点赞数 1

分类专栏：编程文章标签： JS

本文链接：https://blog.csdn.net/btboyhappy/article/details/86506308

版权

编程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端获取服务器时间并更新</title>
</head>
<body>
<p id="time"></p>
</body>
<script>
    var i = 0;
    var sysTime = null;
    //每秒更新页面显示时间
    var int = self.setInterval("handle()", 1000);

    function handle() {
        if (i == 0) {
            synchronization();
        } else {
            time();
        }
        i++;
    }

    //本地计算时间
    function time() {
        var curDate = new Date(sysTime);
        ;
        curDate.setSeconds(curDate.getSeconds() + 1);
        sysTime = curDate;
        document.getElementById("time").innerHTML = "服务器时间：" + curDate.getFullYear() + "-" + (curDate.getMonth() + 1) + "-" + curDate.getDate() + " " + curDate.getHours() + ":" + curDate.getMinutes() + ":" + curDate.getSeconds();
    }

    //同步服务器时间
    function synchronization() {
        var xhr = new XMLHttpRequest();
        if (!xhr) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open("HEAD", location.href, true);
        xhr.onreadystatechange = function () {
            var time = null,
                curDate = null;
            if (xhr.readyState == 2) {
                // 获取响应头里的时间戳
                time = xhr.getResponseHeader("Date");
                curDate = new Date(time);
                sysTime = curDate;
                document.getElementById("time").innerHTML = "服务器时间：" + curDate.getFullYear() + "-" + (curDate.getMonth() + 1) + "-" + curDate.getDate() + " " + curDate.getHours() + ":" + curDate.getMinutes() + ":" + curDate.getSeconds();
            }
        }
        xhr.send(null);
    }
</script>
</html>

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

重瞳Tech

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JS】页面显示服务器时间

基本思路是加载页面时首先与服务器进行时间同步，然后在这个时间的基础上每秒刷新页面显示时间&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;前端获取服务器时间并更新&am
复制链接

扫一扫