利用本章及签名章节介绍的知识,修改时钟返利的代码,让时钟间隔一定时间自动更新。(提示:使用定时器,比如 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();
测试并实现结果如图: