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库,说的人多了,竟然也成了一门技术的名称。呵呵


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3