jQuery练习2——倒计时

时间 2020-10-06

标签 javascript html java jquery ajax 服务器 jsp ide 测试栏目 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())+"<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库，说的人多了，居然也成了一门技术的名称。呵呵。

1. jquery倒计时
2. 倒计时2
3. Jquery时倒计时按钮
4. jquery 24小时倒计时
5. Jquery 定时器倒计时
6. 2015.3.6 倒计时小练习（disabled属性）
7. js中Date对象倒计时练习
8. jQuery中倒计时效果
9. jquery倒计时 countdown.js 翻译
10. JQuery实现倒计时
更多相关文章...
• PHP 5 时区 - PHP参考手册
• Thymeleaf扩展2(Say Hello) - Thymeleaf 教程
• 使用Rxjava计算圆周率
• Tomcat学习笔记（史上最全tomcat学习笔记）