现在的位置: 首页 > 综合 > 正文

(摘)jQuery练习2——倒计时

2013年08月11日 ⁄ 综合 ⁄ 共 3167字 ⁄ 字号 小 中 大 ⁄ 评论关闭
Code:
  1. 最近学生做一个在线考试系统，需要加入试卷倒计时功能。很显然最放方便的就是ajax实现。一下子想起上次提到的jQuery，一用果然简单。jQuery中提供了ajax的方便功能。   
  2. 技术：HTML+Servlet+jQuery   
  3. 实现功能：页面显示倒计时，时间来自服务器。到时间后自动交卷。   
  4. Servlet代码如下：   
  5. response.setContentType("text/html;charset=UTF-8");    
  6. response.setHeader("Cache-Control", "no-cache");    
  7. PrintWriter out = response.getWriter();    
  8. try {    
  9.         if ("submit".equals(request.getParameter("action"))) {    
  10.                 //交卷    
  11.                 //TODO:这里做交卷处理    
  12.                 out.println("已交卷");    
  13.         } else {    
  14.                 //倒计时    
  15.                 //设置结束时间    
  16.                 Calendar timeend = Calendar.getInstance();    
  17.                 timeend.set(2008, 10, 7, 14, 50, 0);    
  18.                 long end = timeend.getTimeInMillis();    
  19.                 //out.print(sdf.format(timeend.getTime())+"<br>");    
  20.                 //获取当前时间    
  21.                 Calendar rightNow = Calendar.getInstance();    
  22.                 //out.print(sdf.format(rightNow.getTime())+"<br>");    
  23.                 long now = rightNow.getTimeInMillis();    
  24.                 //计算剩余时间    
  25.                 int left = (int) (end - now);    
  26.                 if (left <= 0) {    
  27.                         //时间到    
  28.                         out.print("over");    
  29.                 } else {    
  30.                         int leftHour = left / (1000 * 60 * 60);    
  31.                         left = left % (1000 * 60 * 60);    
  32.                         int leftMinute = left / (1000 * 60);    
  33.                         left = left % (1000 * 60);    
  34.                         int leftSecond = left / (1000);    
  35.                         out.print(leftHour + "时" + leftMinute + "分" + leftSecond + "秒");    
  36.                 }    
  37.         }    
  38. } finally {    
  39.         out.close();    
  40. }   
  41. HTML就交给jQuery了，代码如下：   
  42. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  43. <html>    
  44.         <head>    
  45.                 <title></title>    
  46.                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  47.                 <script src="../js/jquery.js" type="text/javascript"></script>    
  48.                 <script type="text/JavaScript">    
  49.                         $(document).ready(function(){    
  50.                                 setInterval(getLeftTime,1000);    
  51.                         });    
  52.                         //得到剩余时间    
  53.                         function getLeftTime(){    
  54.                                 $.get("/jquery/TimeServlet?",function(data){    
  55.                                         if(data=="over"){    
  56.                                                 //window.location="../index.jsp";    
  57.                                                 $("#paperform").submit();    
  58.                                         }    
  59.                                         else{    
  60.                                                 $("#nowis").text(data);    
  61.                                         }    
  62.                                 });    
  63.                         }    
  64.                 </script>    
  65.         </head>    
  66.         <body>    
  67.                 <div id="nowis" ></div>    
  68.                 <form id="paperform" method="POST" action="/jquery/TimeServlet?action=submit">    
  69.                 </form>    
  70.         </body>    
  71. </html>   
  72. 测试。   
  73. 唉，jQuery命名就是一个JavaScript库，说的人多了，竟然也成了一门技术的名称。呵呵。  

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞