jQuery练习2——倒计时-阿里云开发者社区

jQuery练习2——倒计时

2017-11-16 1069

简介：

+关注继续查看

最近学生做一个在线考试系统，需要加入试卷倒计时功能。很显然最放方便的就是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，如需转载请自行联系原作者