分享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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
JQuery 入门实例1
Jun 25 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JS重要知识点小结
Nov 06 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 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
基于文本的留言簿
2006/10/09 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
php rsa加密解密使用详解
2015/01/14 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python字符串排序方法
2014/08/29 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python实现简单的计时器功能函数
2015/03/14 Python
在python中做正态性检验示例
2019/12/09 Python
pytorch数据预处理错误的解决
2020/02/20 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
报关报检委托书
2014/04/08 职场文书
住宅使用说明书
2014/05/09 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
小学感恩节活动总结
2015/03/24 职场文书
单位病假条范文
2015/08/17 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL