本日  昨日
 
03/16(Sun) 01:14

o リアルタイム時刻表示
(00.06.20)スタイルシートによる表示窓(フォームサイズ)の大きさ調整を追加
(99.05.09)2000年対応ルーチンの追加


日付や時間の表示をサーバ側の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 //

スポンサーリンク

関連コンテンツ