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

在实际应用中,需要计算两个时间点之间的差距,一般来说都是计算当前时间和一个指定时间点之间的差距,并且有时候需要精确到天、小时、分钟和秒,下面就简单介绍一下如何实现此效果。

效果图:

距离新年:

代码如下:

<html>
<head>
<title>javascript计算时间差</title>
<style type="text/css">
#thenceThen
{
 font-size:2em;
}
</style>
<script type="text/javascript">
function thenceThen()
{
 var theTime="2014/5/4"
 var endTime=new Date(theTime);
 var totalSecs=(endTime-new Date())/1000;
 var days=Math.floor(totalSecs/3600/24);
 var hours=Math.floor((totalSecs-days*24*3600)/3600);
 var mins=Math.floor((totalSecs-days*24*3600-hours*3600)/60);
 var secs=Math.floor((totalSecs-days*24*3600-hours*3600-mins*60));
 if(days!=0)
 {
 document.getElementById("thenceThen").innerHTML=days+"天"+hours+"小时"+mins+"分钟"+secs+"秒";
 }
 else if(hours==0&&mins==0)
 {
 document.getElementById("thenceThen").innerHTML=secs+"秒";
 }
 else if(hours==0&&mins!= 0)
 {
 document.getElementById("thenceThen").innerHTML=mins+"分钟"+secs+"秒";
 }
 else if (hours!=0)
 {
 document.getElementById("thenceThen").innerHTML=hours+"小时"+mins+"分钟"+secs+"秒";
 }
}
var clock;
window.onload=function()
{
 clock=setInterval("thenceThen()",500);
}
</script>
</head>
<body>
<div id="thenceThen"></div>
</body>
</html>

以上代码实现了我们想要的功能,下面简单介绍一下此效果的实现过程。
一.实现原理:
原理非常的简单,就是计算连个时间点之间的毫秒差距,然后经过数学运算得出相应的天、小时、分钟和描述,通过setInterval()函数每秒调用一次函数,那么就是先了倒计效果。
二.代码注释:
1.function thenceThen(){},此函数用来计算时间差距。
2.var theTime="2014/5/4",此变量用来定义要计算时间差的一个时间点。
3.var endTime=new Date(theTime),创建当前时间对象。
4.var totalSecs=(endTime-new Date())/1000,两个时间对象的差是两者之间的毫秒差距,再除以1000就是相差的描述。
5.var days=Math.floor(totalSecs/3600/24),计算相差的天数,特别注意Math.floor()函数的作用,可以参看相关阅读。
6.var hours=Math.floor((totalSecs-days*24*3600)/3600),计算相差的小时数。

以上就是javascript计算时间差的示例代码,希望对大家的学习有所帮助。

时间: 2016-01-10

C# 计算传入的时间距离今天的时间差

废话不多说了,直接给大家贴代码了,具体代码如下所示: /// <summary> /// 计算传入的时间距离今天的时间差 /// </summary> /// <param name="dt"></param> /// <param name="yy"></param> /// <param name="mm"></param> /// <par

Oracle计算时间差为毫秒的实现代码

Oracle 中我们知道用 TO_DATE 函数可以进行秒.分.时.天.月.年.周等时间差的计算,但是毫秒却不好计算,TO_DATE 函数只能精确到秒,毫秒则只能用 TO_TIMESTAMP 函数,但是这个函数不像 TO_DATE 这样直接减出来的差值就是 NUMBER 类型,如果用 TO_NUMBER 函数转换也会报错. 这里我是用分隔字符串单独计算毫秒部分,如果有更好的办法,请大家分享一下,下面是查询时间差为毫秒的模板(字段1 – 字段2): SELECT ( ( (TO_TIMESTAMP

oralce 计算时间差的实现

oralce 计算时间差的实现 查询系统时间和给定时间相差的毫秒数 select ceil((sysdate - To_date('2017-03-23 00:00:00' , 'yyyy-mm-dd hh24-mi-ss')) * 24 * 60 * 60 * 1000) 相差豪秒数 FROM DUAL; 将account表中第一条数据的dcur_state_start_date(timestamp类型)字段值的相差豪秒数算出来 select ceil((sysdate -TO_DATE( T

Javascript计算时间差的函数分享

复制代码 代码如下: /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中,年月日为全格式,例如 : 2010-10-12 01:00:00 * 返回精度为:秒,分,小时,天 */ function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime = startTime.replace(/\-/g, "/&quo

自己写的Javascript计算时间差函数

自己写了一下,适用而已,不太好,应该还能优化.先自己记录一下.不说废话了,直接贴代码最好: 复制代码 代码如下: /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中,年月日为全格式,例如 : 2010-10-12 01:00:00 * 返回精度为:秒,分,小时,天 */ function GetDateDiff(startTime, endTime, diffType){    //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/x

javascript时间差插件分享

javascript时间差插件分享,供大家参考,具体内容如下 Html如下: <html> <head> <title></title> <script src="js/TimeDifference.js" type="text/javascript"></script> <script src="js/jquery-1.10.2-min.js" type="

一个简单的JavaScript Map实例(分享)

用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; *

通过Java压缩JavaScript代码实例分享

通过移除空行和注释来压缩 JavaScript 代码 /** * This file is part of the Echo Web Application Framework (hereinafter \"Echo\"). * Copyright (C) 2002-2009 NextApp, Inc. * * Compresses a String containing JavaScript by removing comments and whitespace. */ public

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人类是社交动物,而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求.另外网页的社交分享功能不仅可以满足阅读者,同时,对于网络应用本身,也可以相应的增加该网站的外部链接,比如微博豆瓣等线上粘性用户非常多的社交平台,如果是twitter或者facebook则可以带来一部分来自于国外的流量,对于网络平台来说,这样做即可以分发流量又可以引流导流,一箭双雕,一举而多得.

分享一则JavaScript滚动条插件源码

这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果. 并不算完美的兼容性,在IE6.7下的style仍然有点缺憾. 样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写. 内部结构的混乱,需要调整内容结构. 滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧 总体

JavaScript实现的双向跨域插件分享

由于浏览器(同源策略)限制,JavaScript 跨域的问题,一直是一个颇为棘手的问题.HTML5 提供了跨文档消息传输的功能,在网页文档之间互相接收与发送信息.使用这个功能,不仅同源(域 + 端口号)的 Web 网页之间可以互相通信,还可以在两个不同域名之间实现跨域通信. 跨文档消息传输Cross Document Messaging提供了postMessage方法在不同网页文档之间互相传递数据,支持实时消息传递.现在很多浏览器都将支持这个功能,比如Google Chrome 2.0+.Int

30个最佳jQuery Lightbox效果插件分享

Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

Labelauty–jQuery单选框/复选框美化插件分享

本文实例讲述了Labelauty–jQuery单选框/复选框美化插件,分享给大家供大家参考.具体如下: Labelauty–jQuery单选框/复选框美化插件,基于jQuery的一个非常小巧的插件,它除了能够实现单选框/复选框原本的选中.未选中.禁用等功能外,还能够设置选中和未选中的文本信息.标签的最小宽度等. 运行效果图:-------------------------------查看效果------------------------------------ 具体代码如下 <head>

使用JQuery实现的分页插件分享

一个简单的jQuery分页插件,兼容AMD规范和requireJS. /** * jQuery分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定义

javascript经典特效分享 手风琴、轮播图、图片滑动

最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style: