分享javascript计算时间差的示例代码

 更新时间:2016年01月13日 08:47:13   作者:一落叶而知秋   我要评论
这篇文章主要为大家介绍了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计算时间差的示例代码,希望对大家的学习有所帮助。

相关文章

  • JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

    JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

    这篇文章主要介绍了JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查,需要的朋友可以参考下
    2017-04-04
  • JavaScript创建对象的四种常用模式实例分析

    JavaScript创建对象的四种常用模式实例分析

    这篇文章主要介绍了JavaScript创建对象的四种常用模式,结合实例形式分析了javascript使用工厂模式、构造函数模式、原型模式及动态原型模式创建对象的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • javascript实现自由编辑图片代码详解

    javascript实现自由编辑图片代码详解

    这篇文章主要介绍了javascript实现自由编辑图片代码详解,在当下的的前端项目中,图片功能可以说是非常常见的,图片的展示、图片的裁剪编辑、图片的上传等,那么我们的项目便来了个需求。,需要的朋友可以参考下
    2019-06-06
  • javascript实现QQ空间相册展示源码

    javascript实现QQ空间相册展示源码

    本文给大家分享基于javascript制作的qq空间相册展示效果,涉及到html\css布局思维,浮动定位详解,具体实现代码大家参考下本文
    2017-12-12
  • 30分钟快速实现小程序语音识别功能

    30分钟快速实现小程序语音识别功能

    最近需要在小程序上实现语音识别,将需要用到的功能都总结下,供大家参考。语音识别用的是科大讯飞,文中给出了详细的实现方法介绍,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 浅谈webpack4.x 入门(一篇足矣)

    浅谈webpack4.x 入门(一篇足矣)

    这篇文章主要介绍了浅谈webpack4.x 入门(一篇足矣),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • jQuery与js实现颜色渐变的方法

    jQuery与js实现颜色渐变的方法

    这篇文章主要介绍了jQuery与js实现颜色渐变的方法,涉及javascript与jQuery的正则操作与数学运算相关技巧,需要的朋友可以参考下
    2016-12-12
  • 产制造追溯系统之通过微信小程序实现移动端报表平台

    产制造追溯系统之通过微信小程序实现移动端报表平台

    这篇文章主要介绍了产制造追溯系统-通过微信小程序实现移动端报表平台 ,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • javascript之AJAX框架使用说明

    javascript之AJAX框架使用说明

    javascript之AJAX框架使用说明,需要的朋友可以参考下.`
    2010-04-04
  • Javascript 判断Flash是否加载完成的代码

    Javascript 判断Flash是否加载完成的代码

    网站加入flash代码,利用DIV层来控制进度的状态,如果加载swf文件到100%的时候就显示出flash,把AD层隐藏掉,请看下面实现方法。
    2010-04-04

最新评论