時刻に応じて表示メッセージを変化させたい

夜にアクセスすると「夜遅くに来てくれてありがとう」、朝にアクセスすると「朝早いですね」などと、時刻に応じた挨拶文が表示されるホームページを見たことはありませんか?

このような、アクセス時刻によって変化するメッセージは、JavaScriptを使えば簡単に作ることができます。
そこで今回は、時刻に応じて挨拶文が変化するページの作り方をご紹介致しましょう。

まずは、以下のサンプルを見て下さい。

上記には、アクセス時刻によって以下のメッセージが表示されます。

  • 00時~01時台: 夜はこれから!
  • 02時~03時台: そろそろ寝た方がいいんじゃ…?
  • 04時~05時台: 早いですね。もしくは徹夜?
  • 06時~07時台: おはようございます。
  • 08時~09時台: そろそろお仕事ですか?
  • 10時~11時台: こんにちは。
  • 12時~13時台: お昼時です。お腹空きませんか?
  • 14時~15時台: おやつの時間です。
  • 16時~17時台: そろそろ夕方ですね。
  • 18時~19時台: そろそろ夕食ですか?
  • 20時~21時台: こんばんは。
  • 22時~23時台: ネットが混み出す頃ですね。

2時間ごとにメッセージが変わるわけですが、それでは実際に変わっていることを確認しづらいので、 アクセスした「秒」によってメッセージが変わるサンプルを以下に用意しました。

10秒ごとにメッセージが変わりますので、10秒経ったらこのページをリロード(再読込)してみて下さい。
※自動的には変わりません。ページをリロードさせて下さい。

このような、時刻によって異なるメッセージを表示するには、JavaScriptを使います。 具体的な方法を、次のページでご紹介致しましょう。

時刻によってメッセージを変えるには… >>