开发者社区> javaboy2012> 正文

jquery+ajax实现倒计时动态显示效果。

简介:
+关注继续查看

 

前台页面:

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'time_view2.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->

<script type="text/javascript" src="../js/jquery/jquery-1.5.1.min.js"></script>

  </head>
 
<script>
//倒计时显示方法
function getTimeNum(){
  $.ajax({
  url: "/event/2012flower/test.jsp?t==="+new Date(),
  type: "GET",
     dataType: "text",
     success: function(data){
      //alert("time="+data);
      $("#showTimes").html(""+data);
     }
 });
}

</script>
 
  <body>

 

<div id="showTimes"></div>


 <script>
window.setInterval("getTimeNum()", 1000);
</script>

  </body>
</html>

 

 

后台服务页面:

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 
        //当前时间毫秒数
    Long current_time1=System.currentTimeMillis();
  
  //结束时间毫秒数
  Long  end_time2=1337875200000l;
  
  //计算时间差
  Long time2=end_time2-current_time1;
       
        //转换为秒数
        int second=(int)(time2/1000); //剩余总秒数
 
     //将秒数专为天数
 
      int s = second % 60; // 秒
      int  mi = (second - s) / 60 % 60; // 分钟
      int h =  ((second - s) / 60 - mi ) / 60 % 24; // 小时
      int d =  (((second - s) / 60 - mi ) / 60 - h ) / 24; // 天
     
      String ret= "剩余:" + d + "天" + h + "小时" + mi + "分钟" + s + "秒";
      //System.out.println(ret);
 
   %>
  
   <%=ret %>

 

 

 

 

 

 

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

相关文章
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
116 0
原生AJAX实现异步请求
原生AJAX实现异步请求
45 0
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
164 0
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
111 0
Ajax基本案例详解之$.getjson的实现
Ajax基本案例详解之$.getjson的实现
17 0
Ajax基本案例详解之$.get的实现
Ajax基本案例详解之$.get的实现
28 0
Ajax基本案例详解之$.post的实现
Ajax基本案例详解之$.post的实现
17 0
Ajax基本案例详解之load的实现
Ajax基本案例详解之load的实现
22 0
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
82 0
+关注
javaboy2012
学习是一种精神,分享是一种美德
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载