10 時間によって異なるメッセージを表示

ページにアクセスした時間によって、違うメッセージが表示されるようJavascriptで設定してください。

ファイル名は js10.html  としてください。

サンプル

  : 省略

1: <SCRIPT LANGUAGE="JavaScript">
2: <!--
3: h = (new Date()).getHours();
4:
5: if((h >= 0) && (h < 3)){ document.write("午前0時を回りました"); }
6: if((h >= 3) && (h < 6)){ document.write("もうすぐ夜が明けます"); }
7: if((h >= 6) && (h < 9)){ document.write("おはようございます!"); }
8: if((h >= 9) && (h < 12)){ document.write("お昼ごはんは何でしょう?"); }
9: if((h >= 12) && (h < 15)){ document.write("グッドアフタヌーン!"); }
10: if((h >= 15) && (h < 18)){ document.write("夕方になりました。"); }
11: if((h >= 18) && (h < 21)){ document.write("こんばんは!"); }
12: if((h >= 21) && (h < 24)){ document.write("もうすぐ寝る時間です。"); }
13: //-->
14: </SCRIPT>

  : 省略

解説

3行目:
h = (new Date()).getHours();
現在の時間は Date() で取り出せます。
Date() で取り出す値に対して getHours() を使うと、 時刻の 時(Hour) の部分だけを取り出せます。
このサンプルでは、変数 h に 時 を代入しています。
変数 h には 0 〜 23 の数字が代入されます。

5〜12行目:
if() 関数を使って、変数 h に格納された 時 に応じて異なるメッセージを画面に表示しています。
if の条件式の中で使われている  &&  は、2つの条件が両方とも成り立つ場合(AND) という意味になります。
ちなみに、2つの条件のうち 片方が成り立てばよい場合(OR) は || と書きます。

実行例

実行例

参考

このサンプルでは3時間おきにメッセージを変えていますが、
if() 関数を調整すれば 1時間おきや6時間おきにメッセージが変わるように修正できます。
もし余裕があれば改造をしてみましょう。