日時を表示する

　日時の取得や設定には Date オブジェクトを利用します。使う際は、"new" を使ってオブジェクトを生成します。これには、初期値の設定の違いにより、以下の３種類の方法があります。いずれも、後から異なる値に入れ直すことが可能です。ただし、下記の引数のうち、月の部分(m)のみ、0 から始まりますので注意が必要です

new Date()	：　初期値...生成時の日時
new Date(y, m, d)	：　初期値...y年(m+1)月d日0時0分0秒
new Date(y, m, d, H, M, S)	：　初期値...y年(m+1)月d日H時M分S秒

　さらに、Dateオブジェクトには、年、月、日、曜日、時、分、秒、ミリ秒を個別に取得または設定するメソッドが用意されています。これらのうち、曜日は取得のみ可能で、数値 0〜6 の範囲で表現されます。また、下表中、getYear と setYear は、1900年からの経過年数（ex. : 1970年→70, 2005年→105）となります。

取得	設定	引数	値
getYear()	setYear(y)	y : 年	年を表す数値（一〜四桁）
getFullYear()	setFullYear(y)	y : 年	年を表す数値（四桁）
getMonth()	setMonth(m)	m : 月	月を表す数値 : 0 〜 11
getDate()	setDate(d)	d : 日にち	日にちを表す数値 : 1 〜 31
getDay()	-	-	曜日を表す数値 : 0（日曜） 〜 6（土曜）
getHours()	setHours(H)	H : 時間	時間を表す数値 : 0 〜 23
getMinutes()	setMinutes(M)	M : 分	分を表す数値 : 0 〜 59
getSeconds()	setSecons(S)	S : 秒	秒を表す数値 : 0 〜 59
getMilliseconds()	setMilliseconds(ms)	ms : ミリ秒	ミリ秒を表す数値 : 0 〜 999

// JavaScript ソース
var dt1 = new Date();     // Date オブジェクトを生成
dt1.getFullYear();          // 年（四桁）の取得
dt1.setFullYear(2001);   // 年（四桁）を2001年に設定
dt1.setMonth(0);         // 月を１月に設定
dt1.setDate(15);          // 日にちを15日に設定	

　Date オブジェクトには、日時を文字列に変換して表示するメソッドが、あらかじめ用意されています。以下のサンプルは、すべて同じ日時を表したものです。ただし、OS、ブラウザ、及びこれらの設定によって出力される形式は異なります。

method	example
toDateString()	"Tue Dec 25 2001"
toGMTString()	"Tue, 25 Dec 2001 06:47:59 UTC", "Tue, 25 Dec 2001 06:47:59 GMT"
toUTCString()	"Tue, 25 Dec 2001 06:47:59 UTC", "Tue, 25 Dec 2001 06:47:59 GMT"
toLocaleString()	"2001年12月25日 15:47:59", "Tuesday, December 25, 2001 15:47:59"
toLocaleDateString()	"2001年12月25日", "Tuesday, December 25, 2001"
toTimeString()	"15:47:59 UTC+0900", "15:47:59 GMT+0900"
toLocaleTimeString()	"15:47:59"

　上記のメソッドで、GMT とあるのは、グリニッジ標準時を表す略語です。また、UTC とあるのは、協定世界時（世界で時刻を記録する際に使われる公式時刻）を表す略語です。
　上記以外のフォーマットを行う場合は、別に関数を用意する必要があります。以下は曜日を含めて文字列として出力する例です。

// JavaScript ソース
function ShowDate() {
     var aWeek = new Array("日","月","火","水","木","金","土"); // 週を表す文字列
     var d1 = new Date();      // Date オブジェクト
     var s1;                         // 表示文字列

     s1 = d1.getFullYear() + "年" + (d1.getMonth()+1) + "月" + d1.getDate() + "日";
     s1 += "（" + aWeek[d1.getDay()] + "） ";
     s1 += d1.getHours() + "時" + d1.getMinutes() + "分" + d1.getSeconds() + "秒";
     alert("只今の時刻 : " + s1);
} 

<!-- HTML ソース -->
<form action="">
     <input type="button" value="日時の表示" onclick="ShowDate()" >
</form>	

　Dateオブジェクトとタイマーを利用して、デジタル時計を簡単に作成することができます。ここでは、form 要素及び text 要素の name 属性を利用してオブジェクトを特定した上で、時刻を表示しています。

// JavaScript ソース
var idTimer;     // タイマーのID

// 時計表示の開始
function ClockStart() {
     if (!idTimer) ShowClock();
}

// 時計の表示
function ShowClock() {
     var dNow = new Date();
     var sNow;                   // 表示する文字列
     var sYear = dNow.getFullYear();        // 年
     var sMonth = dNow.getMonth() + 1;  // 月
     var sDate = dNow.getDate();             // 日
     var sHour = dNow.getHours();           // 時
     var sMinute = dNow.getMinutes();     // 分
     var sSecond = dNow.getSeconds();    // 秒

     // 10以下の時は頭に"0"を挿入
     if (sMonth < 10) sMonth = "0" + sMonth;
     if (sDate < 10) sDate = "0" + sDate;
     if (sHour < 10) sHour = "0" + sHour;
     if (sMinute < 10) sMinute = "0" + sMinute;
     if (sSecond < 10) sSecond = "0" + sSecond;

     sNow = " "+sYear+"/"+sMonth+"/"+sDate+". "+sHour+":"+sMinute+":"+sSecond;
     document.form1.text1.value = sNow;
     idTimer = setTimeout("ShowClock()", 1000);
}

// 時計表示の中止
function ClockStop() {
     if (idTimer) {
          clearTimeout(idTimer);
          idTimer = null;
     }
     document.form1.text1.value = "時計の表示";
} 

<!-- HTML ソース -->
<form name="form1" action="">
     <input type="text" name="text1" value="時計の表示" style="width:12em" >
     <input type="button" value="スタート" onclick="ClockStart()" >
     <input type="button" value="ストップ" onclick="ClockStop()" >
</form> 

　表示を input 以外の要素にしたり、スクリプトを別ファイルに置きたい場合はDOMを利用します（IE5/NN6以上）。この場合、表示する要素には id 属性を設定する必要があります。スクリプト側では id をもとに getElementById メソッドを使用してオブジェクトを特定します。

// JavaScript ソース
var idTimer;
var objClock;
var node1;

function ClockStart(id) {
     if (!idTimer) {
          objClock = document.getElementById(id);
          ShowClock(id);
     }
}

function ShowClock() {
     var dNow = new Date();
     if (node1) objClock.removeChild(node1);
     node1 = document.createTextNode(dNow.toLocaleTimeString());
     objClock.appendChild(node1);
     idTimer = setTimeout("ShowClock()", 1000);
}

function ClockStop() {
     if (idTimer) {
          clearTimeout(idTimer);
          idTimer = null;
     }
     if (node1) {
          objClock.removeChild(node1);
          node1 = null;
     }
}

<!-- HTML ソース -->
<form action="" style='margin:1ex'>
     <div id="disp1" style="float:left; width:10em; color:white; background-color:black; 
          text-align:center;"></div>
     <input type="button" value="スタート" onclick="ClockStart('disp1')" >
     <input type="button" value="ストップ" onclick="ClockStop()" >
</form>	

　document オブジェクトの lastModified プロパティで、最終更新日を取得することができます。これは、該当ファイルの最終更新日の値です。ただし、この値は、OS、ブラウザ、設定によって表示の形式が異なります。表示形式を統一させるためには、フォーマットが必要です。
　また、Webサーバーによっては動作しないことがあります。使用する際は動作確認が必要です。また、古いブラウザ（IE4, NN3）でも動作しないことがあるようです。

// JavaScript ソース
function ShowLastModified() {
     var dt = new Date(document.lastModified);
     var str = dt.getFullYear() + "年" + (dt.getMonth()+1) +"月" + dt.getDate() + "日";
     document.form1.text1.value = str;
} 

<!-- HTML ソース -->
<form name='form1' action="" style='margin-left:1em'>
     最終更新日 : <input type='text' name='text1' value='' style='width:9em;'>
</form> 

　日時同士を足したり引いたりして、値を算出することができます。ただし、ミリ秒単位となるため、日数や時間を算出する時は別途計算する必要があります。

ミリ秒/ 1000	：　秒単位に変換（小数点を含む）
ミリ秒/(1000x60)	：　分単位に変換（小数点を含む）
ミリ秒/(1000x60x60)	：　時間単位に変換（小数点を含む）
ミリ秒/(1000x60x60x24)	：　日にち単位に変換（小数点を含む）

　以下のサンプルは、次のお正月（一月一日）までの日数と時間数を計算するものです。記述中、ceil() は、小数点を切り上げる Math オブジェクト（計算を扱うオブジェクト）のメソッドです。逆に切り捨てる時は floor() メソッドを使います。

// JavaScript ソース
function CountToNewYear() {
     var dt1 = new Date();                                 // 現在の日時
     var dt2 = new Date(dt1.getFullYear()+1,0,1); // 翌年の一月一日
     var dt3 = dt2 - dt1;                                   // 両者の差（ミリ秒）
     var dt4 = Math.ceil(dt3 / (1000*60*60));     // 差を時間数に変換（小数点切り上げ）
     var dt5 = dt4 % 24;                                    // １日に満たない部分の時間数
     var dt6 = (dt4 - dt5) / 24;                          // 日数
     alert("来年のお正月まであと " + dt6 + "日と" + dt5 +"時間");
} 

<!-- HTML ソース -->
<form action="" style="margin:1ex">
     <input type="button" value="計算結果" onclick="CountToNewYear()" >
</form>