9 指定日までの残り日数を表示

指定日までの残り日数を表示する機能をJavascriptで実現してください。

ファイル名は js09.html  としてください。

サンプル

1: <HTML>
2: <HEAD>
3: <TITLE>指定日までの残り日数を表示</TITLE>
4: <SCRIPT LANGUAGE="JavaScript">
5: <!--
6: function apDay(y,m,d) {
7:   today = new Date();
8:   targetday = new Date(y,m-1,d);
9:   dayms = 24 * 60 * 60 * 1000;
10:   n = Math.floor((targetday.getTime() - today.getTime())/dayms) + 1;
11:   document.write(n);
12: }
13: //-->
14: </SCRIPT>
15: </HEAD>
16: <BODY>
17: 2013年4月1日まで あと
18: <FONT color="#ff0000" size="6">
19: <SCRIPT LANGUAGE="JavaScript">
20: <!--
21: apDay(2013,4,1);
22: //-->
23: </SCRIPT></FONT>
24: 日です。
25: </BODY>
26: </HTML>

解説

6行目:
function apDay(y,m,d) {
新しい関数 apDay() を定義しています。
apDay() 関数は、指定された日付まであと何日かを計算して画面に表示する関数とします。

apDay() 関数は、function の記述によって apDay( 2013 , 1 , 31 ) のように年月日をカッコの中に書くことができます。
このように、関数のカッコの中に書く値を 引数 (ひきすう  または いんすう) といいます。
それぞれ 変数 y、変数m、変数d に年月日が自動的に代入されて関数の中で使用することできます。

7行目:
today = new Date();
現在の日付を today 変数 に代入しています。

8行目:
targetday = new Date(y,m-1,d);
引数として与えられた年月日 y m d を元に目標となる日付を取得しています。
Dateメソッドは、カッコの中に 年月日 を書くと 該当する年月日の日付情報を取得できます。
なお 月 に値する値は、 1〜12月を 0〜11 の数字で書く必要があります。
そのため、 1〜12の値が入っている変数 m から 1を引いています。

9行目:
dayms = 24 * 60 * 60 * 1000;
1日(24時間)をミリ秒単位に換算した数値を計算しています。
後で日数を計算する際に使用します。

10行目:
n = Math.floor(  (targetday.getTime() - today.getTime() ) / dayms ) + 1;
目標となる日付まであと何日かを計算しています。

日付が代入された変数に対して、getTime() メソッドを追加すると、日付をミリ秒に換算した値を取得できます。
なので  目標となる日付 - 現在の日付 ( apday.getTime() - today.getTime() ) で、目標となる日付まであと何ミリ秒か分かります。
1日間のミリ秒数 (dayms)で割ると、目標となる日付まであと何日間かが分かります。
さらに、Math.floor()メソッドを使うことで で小数点以下を切り捨てています。

21行目:
apDay(2013,4,1);
apDay() 関数に与える日付を しています。

実行例

実行例

参考

このスクリプトは簡単な改造で、指定の日付からの経過日数を計算することもできます。
もし余裕があればあわせて計算してみましょう。