最近學生做一個線上考試系統，需要加入試卷倒計時功能。很顯然最放友善的就是ajax實作。一下子想起上次提到的jQuery，一用果然簡單。jQuery中提供了ajax的友善功能。
技術：HTML+Servlet+jQuery
實作功能：頁面顯示倒計時，時間來自伺服器。到時間後自動交卷。
Servlet代碼如下：
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
try {
if ("submit".equals(request.getParameter("action"))) {
//交卷
//TODO:這裡做交卷處理
out.println("已交卷");
} else {
//倒計時
//設定結束時間
Calendar timeend = Calendar.getInstance();
timeend.set(2008, 10, 7, 14, 50, 0);
long end = timeend.getTimeInMillis();
//out.print(sdf.format(timeend.getTime())+"<br>");
//擷取目前時間
Calendar rightNow = Calendar.getInstance();
//out.print(sdf.format(rightNow.getTime())+"<br>");
long now = rightNow.getTimeInMillis();
//計算剩餘時間
int left = (int) (end - now);
if (left <= 0) {
//時間到
out.print("over");
} else {
int leftHour = left / (1000 * 60 * 60);
left = left % (1000 * 60 * 60);
int leftMinute = left / (1000 * 60);
left = left % (1000 * 60);
int leftSecond = left / (1000);
out.print(leftHour + "時" + leftMinute + "分" + leftSecond + "秒");
}
}
} finally {
out.close();
}
HTML就交給jQuery了，代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/JavaScript">
$(document).ready(function(){
setInterval(getLeftTime,1000);
});
//得到剩餘時間
function getLeftTime(){
$.get("/jquery/TimeServlet?",function(data){
if(data=="over"){
//window.location="../index.jsp";
$("#paperform").submit();
}
else{
$("#nowis").text(data);
});
}
</script>
</head>
<body>
<div id="nowis" ></div>
<form id="paperform" method="POST" action="/jquery/TimeServlet?action=submit">
</form>
</body>
</html>
測試。
唉，jQuery命名就是一個JavaScript庫，說的人多了，竟然也成了一門技術的名稱。呵呵。
本文轉自 王傑瑞 51CTO部落格，原文連結：http://blog.51cto.com/wangjierui/110838，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)