只用一个html+js来获取服务器时间并在html显示出来(只要显示时间数字 每秒变化),只能写一个html文件 jsp和后台java不能修改或增加。后台只需tomcat启动。因为我们只要取得服务器的时间,所以HEAD方法很合适。
使用Ajax每秒获取服务器的时间,然后在显示出来,但是这个用户的网络延迟比较厉害,请求的时间两三秒才到达客户端,那这样更新的时间就不准确了。
采用这样处理效果好得多,第一次页面加载时从服务器端获得时间,然后以这个时间为基准,客户端再用js每秒累加。一下代码是完整的处理:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>server time</title>
<script type="text/javascript">
function gainTime() {
if(window.ActiveXObject) {
xmlHttpRequest=new ActiveXObject("microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttpRequest=new XMLHttpRequest();
}
xmlHttpRequest.open("HEAD","http://localhost:8088/webdemo/1.html",true);
xmlHttpRequest.send("");
xmlHttpRequest.onreadystatechange=function() {
if(xmlHttpRequest.readyState==4) {
if (xmlHttpRequest.status == 200) {
var dateStr=xmlHttpRequest.getResponseHeader("Date");
var d=new Date(dateStr);
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
m = checkTime(m);
s = checkTime(s);
var timeStr = h + ":" + m + ":" + s;
setInterval(function(){
var arr = timeStr.split(":");
if (arr[2] < 59) {
arr[2] ++;
arr[2]=checkTime(arr[2]);
} else if (arr[2] == 59 && arr[1] < 59) {
arr[1] ++;
arr[1]=checkTime(arr[1]);
arr[2] = "00";
}
if (arr[1] == 59 && arr[2] == 59 && arr[0] < 23) {
arr[0] ++;
arr[1] = "00";
arr[2] = "00";
}
if (arr[1] == 59 && arr[2] == 59 && arr[0] == 23) {
arr[0] = "00";
arr[1] = "00";
arr[1] = "00";
}
timeStr = arr.join(":");
document.getElementById("txt").innerHTML=timeStr;
},1000);
}
}
}
}
function checkTime(i) {
if (i<10) {
i="0" + i
}
return i
}
</script>
</head>
<!-- <body onload="setInterval('gainTime()',1000);"> -->
<body onload="gainTime();">
<p>welcome</p>
<div id="txt"></div>
</body>
</html>