Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.69 - 来年までをカウントダウンする


来年の元旦まで、あと何日かをリアルタイムに秒単位に表示します。


Step テーマ
● getTime - 日時へ換算する

実行例


来年まで、あと、 カウントダウン です。



リスト


<script type="text/javascript"><!--
function myFunc(){
    myD = new Date();// 現在時刻 取得
    myYear = myD.getFullYear();// 今年の '年'
    myNextYear = new Date( myYear+1 , 0 , 1 );// 来年の１月１日の経過秒を取得
    myMsec = myNextYear.getTime() - myD.getTime();// 来年1月1日 と現在の差(ミリ秒)
    myNextDay = Math.floor ( myMsec / (1000*60*60*24) );// '日' を計算
    myMsec -= ( myNextDay * (1000*60*60*24) );// 経過秒から '日' を引く
    myNextHour = Math.floor ( myMsec / (1000*60*60) );// '時' を計算
    myMsec -= ( myNextHour * (1000*60*60) );// 経過秒から '時' を引く
    myNextMin = Math.floor ( myMsec / (1000*60) );// '分' を計算
    myMsec -= ( myNextMin * (1000*60) );// 経過秒から '分' を引く
    myNextSec = Math.floor ( myMsec / 1000 );// '秒' を計算
    myDisp = "";// 文字クリア
    if ( myNextDay != 0 ) myDisp += myNextDay + "日と ";// 0日なら表示しない
    if ( myNextHour != 0 ) myDisp += myNextHour + "時間 ";// 0時間なら表示しない
    if ( myNextMin != 0 ) myDisp += myNextMin + "分 ";// 0分なら表示しない
    myDisp += myNextSec + "秒";// 秒セット
    document.getElementById("countdown").innerHTML = myDisp;
}
// --></script>
来年まで、あと、 <SPAN ID="countdown">カウントダウン</SPAN> です。
<script type="text/javascript"><!--
setInterval( "myFunc()", 1000 );
// --></script>



サンプルだけの HTMLは こちらへ

説明


来年までを リアルタイムに カウントダウン表示してみます。
今回も、変わったことはしていません。

Step.5「フォームを使って日付と時刻をリアルタイムに表示してみましょう」か、
Step.49「予定日まで あと何日かカウントダウンしてみましょう」を いじれば 出来上がりです。

とくに、説明もいらないでしょう。なんか、このプログラムは適当です。
もっとスマートな計算方法（算数）があれば、迷わず自分のやり方で時刻を割り出してみましょう。

ちなみに、このプログラムでは、来年の０時０分００秒になったら、翌年のカウントダウンをはじめますね。(^^;


来年の 1月1日 0:00:00 から 現在日時の 差(ミリ秒) を出して、
myD = new Date();// 現在時刻 取得
myYear = myD.getFullYear();// 今年の '年'
myNextYear = new Date( myYear+1 , 0 , 1 );// 来年の１月１日の経過秒を取得
myMsec = myNextYear.getTime() - myD.getTime();// 来年1月1日 と現在の差(ミリ秒)

単純に、日に換算、時に換算、秒に換算していきます。
myNextDay = Math.floor ( myMsec / (1000*60*60*24) );// '日' を計算
myMsec -= ( myNextDay * (1000*60*60*24) );// 経過秒から '日' を引く
myNextHour = Math.floor ( myMsec / (1000*60*60) );// '時' を計算
myMsec -= ( myNextHour * (1000*60*60) );// 経過秒から '時' を引く
myNextMin = Math.floor ( myMsec / (1000*60) );// '分' を計算
myMsec -= ( myNextMin * (1000*60) );// 経過秒から '分' を引く
myNextSec = Math.floor ( myMsec / 1000 );// '秒' を計算

それを、文字列に整理して、
myDisp = "";// 文字クリア
if ( myNextDay != 0 ) myDisp += myNextDay + "日と ";// 0日なら表示しない
if ( myNextHour != 0 ) myDisp += myNextHour + "時間 ";// 0時間なら表示しない
if ( myNextMin != 0 ) myDisp += myNextMin + "分 ";// 0分なら表示しない
myDisp += myNextSec + "秒";// 秒セット

表示します。
document.getElementById("countdown").innerHTML = myDisp;

ループは、相変わらず、setInterval でグルグルです。
setInterval( "myFunc()", 1000 );


参考ステップ
Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう　
Step.49 予定日まであと何日かカウントダウンしてみましょう　
▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP