最近学生做一个在线考试系统，需要加入试卷倒计时功能。很显然最放方便的就是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();
}
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();
}
<!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>
< 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，如需转载请自行联系原作者
