ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルの時差を計算するサンプル コードを共有する

javascript_javascript スキルの時差を計算するサンプル コードを共有する

WBOY
リリース: 2016-05-16 15:20:22
オリジナル
1473 人が閲覧しました

実際のアプリケーションでは、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で時差を計算するサンプルコードです。皆様の学習に役立てていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート