時計を使って、もう少しホームページに役立つことはできないだろうか。
よく、歓迎の挨拶を朝・昼・晩ごとに変えて表示しているページに出会う。
挨拶文だけでなく、背景色や文字色も変えて、表示するページを作ってみよう。
１、時間別データ
先にデータベースで習った大部屋化した立体置場を使い、階数を時間に置き換えて
立体置場名[時間]＝”挨拶文，背景色，文字色”；
のようなデータを０時〜２３時まで準備します。
具体的には
dt[0]="そろそろ切上げたら！,#664444,#ffffff";
dt[1]="深夜まで頑張るね！,#554444,#ffcccc";
〜
〜
dt[23]="おやすみなさい！,#cc8888,#880000";
のように準備します。
２、今の時刻のデータ
そして現在の時計から
tokei=new Date();
h=tokei.getHours();
とｈ置場に現在の時間を格納します。
訪問者に表示する挨拶データは立体置場の
ｄｔ［ｈ］
から取り出して使えそうですね。
３、ＨＴＭＬ文に書く
まず、大部屋化されているデータを split() 命令を使って分割します。
msg=dt[h].split(",");
そうすると
msg[0]にあいさつ文
msg[1]に背景色
msg[2]に文字色
が格納されます。
あいさつ文を、実際に表示するには
document.write(msg[0]);
背景色で塗るのは
document.bgColor=msg[1];
文字に色をつけるのは
document.fgColor=msg[2];
と書けば実現できます。
４、体験してみよう
次のボタンは、時計の変わりです。
その時間にホームページに訪問すると、どんな表示になるか体験してみてください。
それでは、実際に、次のソースをコピーして「メモ帳」に貼り付け、
ＨＴＭＬファイルとして保存した上で、
そのファイルをダブルクリックして開いてみてください。
-
<![CDATA[
<html>
<head>
<title>javascript入門no20</title>
<script language="javascript">
<!--
dt=new Array();
dt[0]="そろそろ切上げたら！,#664444,#ffffff";
dt[1]="深夜まで頑張るね！,#554444,#ffcccc";
dt[2]="徹夜は身体に良くないよ！,#440000,#ccffff";
dt[3]="そんなに面白いの？！,#220000,#ffccff";
dt[4]="朝まで続ける気！,#000000,#ffffff";
dt[5]="もう目がさめた！,#444488,#ccccff";
dt[6]="早起きですね！,#446688,#ff88cc";
dt[7]="おはよう！,#666688,#88ccff";
dt[8]="お天気ですか？,#8888ff,#cccccc";
dt[9]="忙しいですか？,#bbbbff,#000000";
dt[10]="快調ですか？,#ddddff,#000000";
dt[11]="もうじき、お昼ですよ！,#ffffff,#880000";
dt[12]="お昼はしっかり食べよう！,#ffffdd,#008800";
dt[13]="さー、頑張ろう！！,#ffffaa,#000000";
dt[14]="眠気に注意してね!,#dddd88,#000088";
dt[15]="コーヒーでも飲んだら!,#88dd88,#004444";
dt[16]="もう少し頑張って!,#888888,#444400";
dt[17]="残業かな！,#ff8888,#440044";
dt[18]="道草していない！,#ff88ff,#440000";
dt[19]="お帰りなさい！,#ffff88,#004400";
dt[20]="家族団欒を大切に！,#ff8800,#000044";
dt[21]="子供は寝ないと！,#ff8800,#222222";
dt[22]="目が疲れたら一休み！,#ff8844,#000000";
dt[23]="おやすみなさい,#cc8888,#880000";
//-->
</script>
</head>
<body>
<center>
<font size=6>
<script language="javascript">
<!--
tokei=new Date();
h=tokei.getHours();
msg=dt[h].split(",");
document.write(msg[0]); //挨拶文
document.bgColor=msg[1]; //背景色
document.fgColor=msg[2]; //文字色
//-->
</script>
</font>
</center>
</body>
</html>
]]>
|
|