分享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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
jquery validate表单验证插件
Sep 06 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
学习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代码
2010/08/08 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
jQuery 入门讲解1
2009/04/15 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Python实现简单的语音识别系统
2017/12/13 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python绘制雷达图实例讲解
2021/01/03 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
劳动纠纷调解协议书格式
2014/11/30 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年项目工作总结
2015/04/29 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android