分享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
JS实现self的resend
Jul 22 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue实现跨域的方法分析
May 21 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
ezSQL PHP数据库操作类库
2010/05/16 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
Vue filters过滤器的使用方法
2017/07/14 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JS回调函数深入理解
2019/10/16 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python中threading开启关闭线程操作
2020/05/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
python -v 报错问题的解决方法
2020/09/15 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
初中生物教学反思
2014/01/10 职场文书
初中政治教学反思
2014/01/17 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
公积金具结保证书
2015/05/11 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang