分享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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
javascript不可用的问题探究
Oct 01 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
php框架Phpbean说明
2008/01/10 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python随机模块random使用方法详解
2020/02/14 Python
Python数据正态性检验实现过程
2020/04/18 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书