最近做流程项目计算流程总耗时用到了动态显示总耗时的时间,就是用流程结束时间减去开始时间差,此时是显示的时间不是动态的,我所说的动态是针对流程没有结束时候显示的时间差是动态的:就是当前时间减去流程开始时间,获得的时间差就是动态显示的。话不多说,直接看下面的demo.
第一步,在
myeclipse中创建项目
javascriptTest.
第二步,在WebRoot下创建一个jsp页面:dongtaigetdatediff.jsp。该页面代码如下:
class="java" name="code">
<%@ 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 'dongtaigetdatediff.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-1.4.2.min.js"></script>
<script type="text/javascript">
var startTime = "2013-08-11 00:00:00";//开始时间
function count() {
var currTime = new Date();//当前时间
//将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式
startTime = startTime.replace(/\-/g, "/");
var sTime = new Date(startTime);
var totalTime = currTime.getTime() - sTime.getTime();
var days = parseInt(totalTime/parseInt(1000*60*60*24));
totalTime = totalTime%parseInt(1000*60*60*24);
var hours = parseInt(totalTime/parseInt(1000*60*60));
totalTime = totalTime%parseInt(1000*60*60);
var minutes = parseInt(totalTime/parseInt(1000*60));
totalTime = totalTime%parseInt(1000*60);
var seconds = parseInt(totalTime/parseInt(1000));
var time = "";
if(days>=1){
time = days+"天"+hours+"时"+minutes+"分"+seconds+"秒";
}else if(hours>=1){
time = hours+"时"+minutes+"分"+seconds+"秒";
}else if(minutes>=1){
time = minutes+"分"+seconds+"秒";
}else{
time = seconds+"秒";
}
document.getElementById("div1").innerHTML = "当前时间与2013-08-11 00:00:00时间差为:" + time;
setTimeout("count()", 1000);
}
window.onload = count;
</script>
<style>
.myDiv,p{
margin:0 auto;
margin-top:80px;
width:500px;
color: red;
}
</style>
</head>
<body>
<div class="myDiv">
<div id="div1"></div>
</div>
</body>
</html>
第三步,将该项目发布到tomcat中,运行项目直接访问:
http://localhost:8080/javascript/dongtaigetdatediff.jsp即可。
界面如下:
上面的只是一个demo,想用到项目中,只需将指定的时间改成流程开始时间即可。
- 大小: 10.7 KB