分享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 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
微信小程序实现购物车小功能
Dec 30 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
详解python进行mp3格式判断
2016/12/23 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
python实现KNN近邻算法
2020/12/30 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
印尼旅游网站:via
2017/11/12 全球购物
素质教育标语
2014/06/27 职场文书
房屋授权委托书范本
2014/10/07 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
文明礼貌主题班会
2015/08/14 职场文书
Python读写yaml文件
2022/03/20 Python