分享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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
浅析return false的正确使用
Nov 04 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JS class语法糖的深入剖析
Jul 07 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
我的论坛源代码(八)
2006/10/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP编写RESTful接口
2016/02/23 PHP
Cookie 小记
2010/04/01 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
详解Python中的四种队列
2018/05/21 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python 字符串格式化的示例
2020/09/21 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
1亿有多大教学反思
2014/05/01 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js