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

开发者社区> 余二五> 正文

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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9566 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10849 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
918 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13264 0
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 这个主要是用在手机验证码注册的时候用的多, 比如: 正如上图所示那样-60S后还会还原、 直接上代码: //(我是分开写的--后面的代码...
1121 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7394 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6980 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载