`
Kevin12
  • 浏览: 234823 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript 动态显示当前时间(系统时间)和指定时间差

    博客分类:
  • Java
阅读更多
最近做流程项目计算流程总耗时用到了动态显示总耗时的时间,就是用流程结束时间减去开始时间差,此时是显示的时间不是动态的,我所说的动态是针对流程没有结束时候显示的时间差是动态的:就是当前时间减去流程开始时间,获得的时间差就是动态显示的。话不多说,直接看下面的demo.
第一步,在myeclipse中创建项目javascriptTest.
第二步,在WebRoot下创建一个jsp页面:dongtaigetdatediff.jsp。该页面代码如下:
<%@ 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
分享到:
评论

相关推荐

    javascript时间差插件分享_.docx

    根据提供的文档信息,本文将详细解析“javascript时间差插件”的功能、实现原理及使用方法。 ### 插件概述 该插件名为“TimeDifference.js”,主要用途是计算指定时间与当前时间之间的差异,并以人性化的语言展示...

    javascript经典特效---时间各地时间显示.rar

    `Intl.DateTimeFormat`对象不仅支持时区转换,还支持日期和时间的本地化显示,可以根据用户的浏览器设置或手动指定的语言代码调整日期和时间格式。 8. **性能优化**: 当定时器频繁更新时间时,需要注意性能问题...

    分享javascript计算时间差的示例代码

    首先,我们要明确JavaScript中的Date对象是处理日期和时间的主要工具。我们可以创建一个新的Date对象来表示特定的时间点,或者不传任何参数创建当前时间的Date对象。在示例代码中,`new Date()` 会创建一个代表当前...

    JS使用Date对象实时显示当前系统时间简单示例

    文章通过介绍JavaScript中Date对象的使用,演示了如何实现一个简单的实时显示当前系统时间的功能。通过编写JavaScript函数,并结合HTML和CSS的简单应用,向开发者展示了如何利用定时器和DOM操作,实现动态内容的更新...

    JavaScript倒计时程序

    我们可以通过`new Date()`创建一个新的`Date`对象,代表当前时间,或者传入特定的时间戳来创建指定时间的`Date`对象。例如: ```javascript let now = new Date(); let futureTime = new Date('2023-12-31T23:59:59...

    Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

    总结起来,Vue.js中按照创建时间和当前时间显示操作的关键在于正确地处理时间差,并根据时间差的范围生成合适的文本描述。同时,通过时间戳计算年龄也是前端开发中常见的需求,可以通过类似的逻辑实现。这两个功能...

    JavaScript实现倒计时

    JavaScript的`Date`对象可以创建一个表示特定日期和时间的对象。例如,我们可以用`new Date()`来获取当前时间,或者用`new Date(年, 月, 日, 时, 分, 秒, 毫秒)`来指定一个特定的时间。 2. 计算时间差: 为了计算...

    程序天下:JavaScript实例自学手册

    13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...

    javascript 倒计时

    在倒计时中,我们通常会用到`new Date()`来创建当前时间实例,或者`new Date(dateString)`来创建指定时间的实例。 2. **时间戳**:时间戳是自1970年1月1日(UTC/GMT的午夜)开始所经过的毫秒数。JavaScript中的`...

    JavaScript学习笔记

    这些方法包括获取和设置年、月、日、小时、分钟、秒和毫秒的方法,以及计算时间差和格式化日期的方法。 **4.2 时间对象的实际应用** 例如,可以创建一个Date对象来表示当前时间,然后使用方法修改或获取特定的时间...

    所有常见的javascript特效

    5. **日期时间类**:JavaScript的`Date`对象提供了丰富的日期和时间操作方法,可以用于显示当前时间、计算时间差、格式化日期等。例如,`new Date().toLocaleString()`返回本地时间字符串。 6. **计数转换类**:...

    js控制时间

    在JavaScript(JS)中,控制时间涉及到对日期和时间对象的操作。`Date`对象是JavaScript中的内置对象,用于处理日期和时间。在这个场景下,我们需要计算两个时间点之间的差值,并将其转换为天、小时、分钟和秒的形式...

    JS世界时区时间代码.zip

    通过创建`new Date()`实例,我们可以获取当前日期和时间,或者传入特定日期和时间的参数来初始化。 2. **时区处理**: JavaScript的`Date`对象默认使用用户的本地时区。要处理不同时区的时间,我们需要使用`...

    javascript获取当前日期时间及其它操作函数

    JavaScript中的日期和时间操作是编程中常见的需求,特别是在创建动态网页和处理用户输入时。本文将详细介绍如何在JavaScript中获取当前日期时间,并介绍一些其他常用的操作函数。 首先,JavaScript提供了内置的Date...

    JavaScript实现新年倒计时效果

    - JavaScript逻辑:创建了`FreshTime`函数来计算和显示倒计时,该函数首先确定倒计时结束的目标时间点,然后计算当前时间与目标时间点的差值,并将这个时间差转换成天、小时、分钟和秒。 - CSS样式:定义了简单的...

    论坛显示运行时间的代码

    它能够动态计算并展示出网站从指定日期(如:2009年2月14日)到当前日期之间的运行时长,包括天数、小时数、分钟数以及秒数。这种功能常见于各类网站的底部信息栏,用于展示网站的运营历史。 #### 二、HTML与CSS...

    js代码-时间差转换为日期

    创建一个`Date`对象可以获取当前日期和时间,或者指定特定的日期和时间(例如:`new Date("2022-01-01")`)。 3. **计算时间差**: 要计算两个`Date`对象之间的时间差,可以使用`getTime()`方法,它返回自1970年1...

    javascript小方法

    10. **节日倒计时**:通过创建两个日期对象,计算它们之间的时间差,可以实现倒计时功能,例如显示距离特定节日的天数。 11. **打印当前页**:使用`window.print()`函数,可以创建一个按钮,当用户点击时直接打印...

Global site tag (gtag.js) - Google Analytics