jQuery练习——倒计时
近学生做一个在线考试系统,需要加入试卷倒计时功能。很显然最放方便的就是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())+"
");
//获取当前时间
Calendar rightNow = Calendar.getInstance();
//out.print(sdf.format(rightNow.getTime())+"
");
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了,代码如下:
$(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);
}
});
}
测试。
唉,jQuery命名就是一个JavaScript库,说的人多了,竟然也成了一门技术的名称。呵呵相关阅读:
SQL Server 数据库管理常用的SQL和T-SQL语句
ASP.NET AJAX中的非同步PageMethod调用
ASP.NET开发中的八个最佳实践下
yum安装命令的使用方法
细看PEAR的错误处理
从Access 2000数据库转移到Oracle 9i
一键备份MySQL数据库的批处理
5.2 改进ASP应用程序中的字符串处理性能
Linux系统找出大文件的方法
Ajax入门心得
在Windows系统上安装PHP运行环境文字教程
JS 时间显示效果代码
Freebsd7.0+Apache2.2+MySQL5+PHP5安装配置
ASP.NET 2.0 Ajax程序:处理异步调用中的异常