分享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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
JQuery性能优化的几点建议
May 14 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
微信小程序实现星级评价
Nov 20 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP new static 和 new self详解
2017/02/19 PHP
jsPDF导出pdf示例
2014/05/02 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
js实现轮播图特效
2020/05/28 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
教你学会使用Python正则表达式
2017/09/07 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python爬取微信公众号文章的方法
2019/02/26 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
大学生毕业自我评价范文分享
2013/11/07 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
毕业生求职信范文
2014/06/29 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
学校端午节活动总结
2015/02/11 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers