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 %>

 

 

 

 

 

 

目录
相关文章
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
68 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
74 0
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
48 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
99 1
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
35 1
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
23 1
|
4月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
197 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
34 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。