jQuery练习——倒计时
2022-12-25 11:07:09技术：HT
近学生做一个在线考试系统，需要加入试卷倒计时功能。很显然最放方便的就是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库，说的人多了，竟然也成了一门技术的名称。呵呵
作者：喵哥笔记
