jQuery练习——倒计时

　2010-09-14 13:30:10　来源：WEB开发网　　　

核心提示：近学生做一个在线考试系统，需要加入试卷倒计时功能，jQuery练习——倒计时，很显然最放方便的就是ajax实现，一下子想起上次提到的jQuery，竟然也成了一门技术的名称，呵呵，一用果然简单，jQuery中提供了ajax的方便功能

近学生做一个在线考试系统，需要加入试卷倒计时功能。很显然最放方便的就是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>