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


Posted in Javascript onMarch 19, 2020

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

效果图:

距离新年:分享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计算时间差的示例代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
学习JavaScript设计模式之代理模式
Jan 12 #Javascript
基于JavaScript实现TAB标签效果
Jan 12 #Javascript
JavaScript实现瀑布流布局
Jun 28 #Javascript
轻松实现JavaScript图片切换
Jan 12 #Javascript
jQuery动画效果图片轮播特效
Jan 12 #Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 #Javascript
jqueryMobile使用示例分享
Jan 12 #Javascript
You might like
用php实现选择排序的解决方法
2013/05/04 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
destoon之一键登录设置
2014/06/21 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
js常用自定义公共函数汇总
2014/01/15 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
JavaScript字符串对象
2017/01/14 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python for循环中的陷阱详解
2018/07/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python中count函数知识点浅析
2020/12/17 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
会计专业自我鉴定
2014/02/10 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
岗位廉政承诺书
2014/03/27 职场文书
自主招生教师推荐信
2014/05/10 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2014年话务员工作总结
2014/11/19 职场文书
西游降魔篇观后感
2015/06/15 职场文书