時間を取得する |
|||||||||||||||
|
現在時間を表示しているHPに出会うことがあります。そこで表示される時間は使っているコンピュータの時間です。コンピュータの時間を取得してHP上に表示するにはJavaScriptを使います。 JavaScriptではDateオブジェクトを使って時間を取得設定できます。手順は次のとおりです。
西暦年、月日の取得次のプログラムで年月日を取得し、表示できます。 <SCRIPT language="JavaScript"> DD = new Date(); Year = DD.getYear(); Month = DD.getMonth() + 1; Day = DD.getDate(); document.write(Year,"年",Month,"月",Day,"日"); </SCRIPT> まず、次の文で新しいDateオブジェクトDDを作ります。 DD = new Date(); オブジェクトDDには日時に関する情報と、その情報を取り出したりする操作法が含まれていますl。 西暦年を取り出すときはDateオブジェクトのgetYear()メソッドを使います。このプログラムでは取り出した西暦年をYearという変数に代入しています。 Year = DD.getYear(); 月の値を取得するメソッドgetMonthは0〜11までの値を返すので1を加算して正しい月の値にします。 Month = DD.getMonth() + 1; 最後に日にちをgetDate()メソッドで取り出します。 Day = DD.getDate(); このプログラムの実行結果を示します。 今日は「 」です。 西暦年はブラウザの種類やバージョンにより異なる事があります。 時間の取得getYear()、getMonth()、getDate()とくれば、時間の取得はgetHours()、getMinutes()、getSecondsです。 年月日の表示と同じように時間を表示するプログラムです。 <SCRIPT language="JavaScript"> DD = new Date(); Hours = DD.getHours(); Minutes = DD.getMinutes(); Seconds = DD.getSeconds(); document.write(Hours,"時",Minutes,"分",Seconds,"秒"); </SCRIPT> 実行すると 今、「 」です。 時計のように時間を動かす（FORMバージョン)今、表示された時間はこのページを表示した瞬間の時間です。時計のように時間は変化しませんでした。これを時計のように動かすには一定間隔で時間表示を更新できればいいわけです。 この一定間隔で指定したプログラム(関数)を実行するメソッドがsetInterval()です。 このメソッドは繰り返し実行したい関数と、繰り返しの間隔をミリ秒単位で指定します。
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
t = 0;
function DspClk() {
DD = new Date();
Hours = DD.getHours();
Minutes = DD.getMinutes();
Seconds = DD.getSeconds();
status = Hours + "時" + Minutes + "分" + Seconds +"秒";
document.ClkForm.Input.value = Hours + "時" + Minutes + "分" + Seconds +"秒";
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
t = setInterval("DspClk()", 500);
</SCRIPT>
<FORM name="ClkForm">
<INPUT type="text" name="Input">
</FORM>
上記プログラムを表示する
DOMを使って時計を表示上の方法ではFORMを使っていましたが、今度はDOM（Document Object Model)を使って時計を表する方法を紹介します。 FORMバージョンのプログラムとほとんど同じですが表示部分だけが異なります。
<SCRIPT language="JavaScript">
t = 0;
function DspClk() {
DD = new Date();
Hours = DD.getHours();
Minutes = DD.getMinutes();
Seconds = DD.getSeconds();
DC = document.getElementById('pt');
DC.firstChild.nodeValue = Hours + "時" + Minutes + "分" + Seconds +"秒";
}
</SCRIPT>
<SCRIPT language="JavaScript">
t = setInterval("DspClk()", 500);
</SCRIPT>
<P class="p1" id="pt"> What's time is it now? </P>
|
|
||||||||||||||