分享javascript计算时间差的示例代码_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
时间差
javascript 时间差、javascript计算时间差、javascript 时间差 秒、javascript 求时间差、javascript脚本示例,以便于您获取更多的相关知识。

时间: 2024-12-03 02:31:50

分享javascript计算时间差的示例代码_javascript技巧的相关文章

在JavaScript中构建ArrayList示例代码_javascript技巧

前面我们介绍了JavaScript Array 的API,在JavaScript 中 数组 本身就非常强大,可以存储任意类型,且长度自动扩容,又提供 遍历, 过滤,等多个操作数组的方法. 简直完爆Java的的数组(长度固定,单一类型).而Java中的集合类 就是弥补数组不足,其底层大多使用Object [] 存储,只是提供动态扩容的策略,当然JDK的 API 之丰富,是其他语言难以匹敌的. 但是不妨碍我对Java.JavaScript的喜爱. Java就像 一个中年老妇女,你总能在JDK中 看到

JavaScript–Apple设备检测示例代码_javascript技巧

这里提供一些javascript检测代码,用于检测iPhone.iPod.iPad设备. 复制代码 代码如下: // Apple detection objectvar Apple = {};Apple.UA = navigator.userAgent;Apple.Device = false;Apple.Types = ["iPhone", "iPod", "iPad"]; for (var d = 0; d < Apple.Types.

利用javascript打开模态对话框(示例代码)_javascript技巧

1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

javascript操纵OGNL标签示例代码_javascript技巧

吧ONGL标签放到html标签中,来操作html的标签就可以了 例子代码: html 复制代码 代码如下: <div id="categoryid" style="display:none;"><s:property value="id"/></div> javascript 复制代码 代码如下: <script type="text/javascript"> var categ

JavaScript解析URL参数示例代码_javascript技巧

创建一个Js类: 复制代码 代码如下: var Request = { QueryString: function (item) { var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)", "i")); return svalue ? svalue[1] : svalue; } } 引用方法:isaudit = Re

javascript创建createXmlHttpRequest对象示例代码_javascript技巧

复制代码 代码如下:  var xmlHttp;     function createXmlHttpRequest()    {        if(window.XMLHttpRequest)        {            xmlHttp=new XMLHttpRequest();             if(xmlHttp.overrideMimeType)                {                    xmlHttp.overrideMimeType

javaScript 计算两个日期的天数相差(示例代码)_javascript技巧

一:计算两个日期相差的天数 比如:   str1  =  "2002-01-20"   str2  =  "2002-10-11"  怎样用javaScript计算出str1与str2之间相差的天数?  复制代码 代码如下: <html>  <head>  <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312"&

javascript计算星座属相示例代码

 本文介绍了使用javascript计算星座和属相的示例,这个可以用在用户注册的时候显示出来,大家参考使用吧 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function signs() { var start = 1901, birthyear = document.zodiac.year.value, date=document.zodiac.date.value, month=document.zodiac.m

JavaScript中removeChild 方法开发示例代码_javascript技巧

1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove