分享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 相关文章推荐
jquery $.trim()方法使用介绍
May 21 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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
discuz安全提问算法
2007/06/06 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
深入讲解Java编程中类的生命周期
2016/02/05 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
运动会解说词50字
2014/01/18 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android