jQuery练习2——倒计时

简介:
最近学生做一个在线考试系统,需要加入试卷倒计时功能。很显然最放方便的就是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,如需转载请自行联系原作者
目录
相关文章
|
9月前
|
JavaScript 前端开发
jQuery小练习
jQuery小练习
|
30天前
|
JavaScript
jQuery语法练习
jQuery语法练习
|
30天前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
9月前
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
JavaScript 前端开发
【Jquery练习】tab栏切换
在实现今天的练习之前,我们先来了解一下排他思想,排他思想也就是为当前元素设置一个特定的样式,并为其他兄弟元素清除样式。多用于多选一的效果。
103 0
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
144 0
|
SQL 前端开发 JavaScript
【jquery Ajax 练习】图书管理
【jquery Ajax 练习】图书管理
153 0
【jquery Ajax 练习】图书管理
|
JavaScript
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
132 0
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
|
JavaScript
jQuery经典案例【倒计时】
jQuery经典案例【倒计时】
103 0
jQuery经典案例【倒计时】