時間別メッセージをスクロールで表示
リアルタイムの現在時刻と、時間帯によるメッセージをスクロールによって表示します。
TAKUBANDのホームページ で使っているスクリプトです。
|
HTML JavaScript コメント |
| <html> <head> <title>時間別メッセージスクロール</title> <script language="javascript"> <!-- function time_msg(){ //時間別メッセージ作成・・・*1 //現在時刻を取得 d=new Date(); h=d.getHours(); m=d.getMinutes(); jikoku=h+"時"+m+"分です。"; //メッセージ if(4<=h && h<11){ msg="おはようございます。"; } else if(11<=h && h<18){ msg="こんにちは。"; } else if(18<=h && h<23){ msg="こんばんは。"; } else{ msg="おやすみなさい。"; } //テキストボックスの幅分のスペース spc=" "; //表示するメッセージは"スペース+時刻+メッセージ" moji=spc+jikoku+msg; } //カウンタとタイマーの初期化 cnt=0; timer1=0; function scroll(){ //スクロール処理・・・*2 //タイマーを一旦クリア clearTimeout(timer1); //メッセージの先頭の文字から順に消していく。 //これによって、文字がスクロールしているように見える document.form1.text1.value = moji.substring(cnt++,moji.length); //全ての文字が消えたらカウンタとメッセージをリセット if (cnt>moji.length){ cnt=0; time_msg(); } //タイマーを200ミリ秒にセット timer1=setTimeout("scroll()",200); } // --> </SCRIPT> </head> <!-- テキストボックスを表示 --> <form name="form1"><p align="center"> <input type="text" name="text1" size="20"> </p></form> <script language="javascript"> <!-- //time_msg関数とscroll関数を実行 time_msg(); scroll(); // --> </SCRIPT> </html> |
| 解説 （例として現在時刻が22時59分の場合） *1 time_msg関数 まず、PCの内部時計から現在時刻を取得して、時間帯によるメッセージを作成。 午前4時〜午前10時59分 → おはようございます。 午前11時〜午後5時59分 → こんにちは。 午後6時〜午後10時59分 → こんばんは。 午後11時〜午前3時59分 → おやすみなさい。 これに、テキストボックスの長さ分のスペースと現在時刻を加えます。 表示する文字列は " 22時59分です。こんばんは。" となります。 *2 scroll関数 文字列の先頭から1文字づつ削除したものを200ミリ秒おきに表示します。 " 22時59分です。こんばんは。" " 22時59分です。こんばんは。" " 22時59分です。こんばんは。" ↓ ↓ ↓ "こんばんは。" "んばんは。" "ばんは。" 文字列が全て消えたら、time_msg関数で新たに文字列を取得します。 この時点で23時0分になっていれば、文字列は " 23時0分です。おやすみなさい。" となります。 |