実際のアプリケーションでは、2 つの時点の差を計算する必要があります。一般的に、現在時刻と指定された時点の差が計算されますが、場合によっては、日、時間、分、および時間までの精度が必要です。この効果を実現する方法を簡単に紹介します。
レンダリング:
新年から:
コードは次のとおりです:
<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. 実装原則:
原理は非常に単純で、2 つの時点間のミリ秒の差を計算し、対応する日、時、分、および説明を取得するために関数が 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、2 つの時間オブジェクトの差は 2 つの間のミリ秒の差であり、1000 で割ると差が説明されます。
5.var days=Math.floor(totalSecs/3600/24)、日数の差を計算します。Math.floor() 関数の関数に特に注意してください。関連する読み取り値を参照できます。
6.var hours=Math.floor((totalSecs-days*24*3600)/3600)、時間差を計算します。
上記はJavaScriptで時差を計算するサンプルコードです。皆様の学習に役立てていただければ幸いです。