本日 　昨日
 
03/16(Sun) 01:14
o リアルタイム時刻表示
■(00.06.20)スタイルシートによる表示窓(フォームサイズ)の大きさ調整を追加
■(99.05.09)２０００年対応ルーチンの追加

日付や時間の表示をサーバ側のSSI機能を利用して行う方法(ソフト工作室No.2にあります。)はご存じだと思います。この方法では、SSIを実行した時点の時間表示になってしまいます。

リアルタイムな時刻表示をJava Scriptで行ってみませんか？その方法は次のように行います。

  1. リアルタイム時刻表示用関数formClock()をヘッダー部に定義します。
  2. ページがロードされたら関数formClock()を実行するコマンドを記述します。
  3. 時刻表示したい任意の場所に表示用のフォームを記述します。
Java Scriptによるリアルタイム時刻表示のサンプルです。

■ リアルタイム時刻表示用関数formClock()をヘッダー部<HEAD>と</HEAD>の間に定義します。

表示内容の変更は下のサンプルを参考にして下さい。

  • 2000年6月20日　6時10分30秒
    document.formMyClock.myClock.value=year+"年"+(c.getMonth()+1)+"月"+c.getDate()+"日("+day[c.getDay()]+")　"+c.getHours()+"時"+c.getMinutes()+"分"+c.getSeconds()+"秒";
  • 2000/6/20　6:10:30
    document.formMyClock.myClock.value=year+"/"+(c.getMonth()+1)+"/"+c.getDate()+"("+day[c.getDay()]+")　"+c.getHours()+":"+c.getMinutes()+":"+c.getSeconds();
<SCRIPT language="JavaScript"> <!-- timeID = 10; //　割り込みタイマ用 function formClock() { c = new Date(); year = c.getYear(); if (year < 2000) year = year + 1900; day = new Array("日","月","火","水","木","金","土"); document.formMyClock.myClock.value=year+"年"+(c.getMonth()+1)+"月"+c.getDate()+"日(" +day[c.getDay()]+")　"+c.getHours()+"時"+c.getMinutes()+"分"+c.getSeconds()+"秒"; clearTimeout(timeID); timeID = setTimeout('formClock()',1000); } // --> </SCRIPT>

■ ページがロードされたら関数formClock()を実行するコマンドを<BODY>タグの中に記述します。

<body bgcolor="white" onLoad="formClock();">

■ 時刻表示したい任意の場所に表示用のフォームを記述します。

■表示窓(フォームサイズ)の大きさを以下の方法で調整します。

  1. IEのサイズはstyle="width:215px"の215pxで
  2. NCのサイズはSIZE="31"の31で
それぞれのブラウザで実際に表示してみて値を決めて下さい。

■フォーム名formMyClock、INPUT名myClockは関数formClock()中のdocument指定と対応してますので、もしこの名前を変更する時は関数の方の名前も同じに変更します。

<FORM NAME="formMyClock"> <INPUT TYPE="TEXT" NAME="myClock" SIZE="31" style="width:215px"> </FORM>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ