分享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 对话框和状态栏使用说明
Oct 25 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
JS中判断null的方法分析
Nov 21 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
如何利用python进行时间序列分析
2020/08/04 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS