실제 응용에서는 두 시점의 차이를 계산해야 합니다. 일반적으로 현재 시간과 지정된 시점의 차이를 계산하며 때로는 일, 시간, 분 및 시간까지 정확해야 합니다. 초, 이 효과를 얻는 방법을 간략하게 소개하겠습니다.
렌더링:
새해부터:
코드는 다음과 같습니다.
<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>
위의 코드는 우리가 원하는 기능을 달성합니다. 다음은 이 효과의 구현 과정을 간략하게 소개합니다.
1. 구현 원칙:
원리는 매우 간단합니다. 두 시점의 차이를 밀리초 단위로 계산한 다음, 해당하는 일, 시간, 분 및 설명을 얻기 위해 해당 함수를 setInterval() 함수를 통해 호출합니다. 그러면 카운트다운이 시작됩니다.
2. 코드 주석:
1.function thenThen(){}, 이 함수는 시차를 계산하는 데 사용됩니다.
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 hour=Math.floor((totalSecs-days*24*3600)/3600), 시간 차이를 계산합니다.
위 내용은 자바스크립트에서 시차를 계산하는 샘플 코드입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다.