分享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.all与WEB标准
May 13 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
js实现自动锁屏功能
Jun 02 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
77A一级收信机修理记
2021/03/02 无线电
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
sails框架的学习指南
2014/12/22 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Python logging模块handlers用法详解
2020/08/14 Python
python爬取微博评论的实例讲解
2021/01/15 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
单位创先争优活动方案
2014/01/26 职场文书
集体备课反思
2014/02/12 职场文书
创业融资计划书
2014/04/25 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技