笔记练习：《Javascript入门经典（第5版）》page202_16.11Practice

最新推荐文章于 2021-06-19 01:49:21 发布

原创最新推荐文章于 2021-06-19 01:49:21 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用JavaScript的定时器函数修改时钟示例代码，使其能够自动更新显示时间，并计算与服务器时间的时差。

利用本章及签名章节介绍的知识，修改时钟返利的代码，让时钟间隔一定时间自动更新。（提示：使用定时器，比如 setInterval() 或 setTimeout()。）

修改时钟范例的脚本，显示服务器时间与本地时间之间的时差。

HTML 文件 代码内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax Clock</title>
    <style>
        #clock{
            font: 32px normal verdana,helvetica,sans-serif;
        }
    </style>
    <script src="ajax.js"></script>
    <script>
        //添加 callAjax（）函数附加到按钮onclick事件处理器
        window.onload = function(){
            document.getElementById("btn1").onclick = callAjax;
        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="Get Time" />
    <br/>
    <div id="clock"></div>
</body>
</html>

JS 文件 代码内容如下：

//跨浏览器创建 XMLHttpRequest 对象
function getXMLHttpRequest(){
    try{
        try{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    catch(e){
        return new XMLHttpRequest();
    }
}
//发送服务器请求
function callAjax(){
    var url = "clock.php";
    var myRandom = parseInt(Math.random() * 99999999);
    myRequest.open("GET",url + "?rand=" + myRandom,true);
    myRequest.onreadystatechange = responseAjax;
    myRequest.send(null);
}
//设置回调函数,判断服务器状态，返回执行语句
function responseAjax(){
    if(myRequest.readyState == 4){
        if(myRequest.status == 200){
            var now = new Date();
            var localTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
            var serverTime = myRequest.responseText;
            document.getElementById("clock").innerHTML = "Server:" + serverTime +"<br/>" + "Local:" + localTime +  "<br />时差：" + Math.abs(parseInt(serverTime)-parseInt(localTime));
            //设置定时器，每隔1秒的时间调用；
            setTimeout('callAjax()',500);
        }else{
            alert("An error has occurred:" + myRequest.statusText);
        }
    }
}

//创建 XMLHttpRequest 实例
var myRequest = getXMLHttpRequest();

测试并实现结果如图：