分享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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
json字符串对象转换代码实例
Sep 28 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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
adodb与adodb_lite之比较
2006/12/31 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
js的event详解。
2006/09/06 Javascript
利用javascript查看html源文件
2006/11/08 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JS 控件事件小结
2012/10/31 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
python开发中module模块用法实例分析
2015/11/12 Python
python实现kMeans算法
2017/12/21 Python
python使用turtle绘制分形树
2018/06/22 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python中类的属性和方法介绍
2018/11/27 Python
python 动态调用函数实例解析
2019/10/21 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
顶撞老师检讨书
2014/02/07 职场文书
中秋节主持词
2014/04/02 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
nginx内存池源码解析
2021/11/20 Servers