2/2 時刻によって挨拶文を変化させる [ホームページ作成] All About

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

時刻に応じて表示メッセージを変化させるには、JavaScriptを用います。
ポイントは次の通りです。

現在時刻を調べる
時刻で条件分岐して、メッセージを表示する

一見難しそうに思えるかも知れませんが、ポイントは上記の2つだけです。非常に単純です。

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

すべてのソースを以下にご紹介致します。このソースを、HTMLファイルのhead要素内（<head>～</head>の中）に記述しておきます。
※改行によってソースが見えにくい場合は、ブラウザのウインドウを最大化するなど、横幅を広げると見やすくなります。

function Greeting() {

   var nt = new Date();

   var hr = nt.getHours();

   if( hr <= 1 )	 	{	document.write('夜はこれから！');	}

   else if( hr <= 3 )	{	document.write('そろそろ寝た方がいいんじゃ…？');	}

   else if( hr <= 5 )	{	document.write('早いですね。もしくは徹夜？');	}

   else if( hr <= 7 )	{	document.write('おはようございます。');	}

   else if( hr <= 9 )	{	document.write('そろそろお仕事ですか？');	}

   else if( hr <= 11 )	{	document.write('こんにちは。');	}

   else if( hr <= 13 )	{	document.write('お昼時です。お腹空きませんか？');	}

   else if( hr <= 15 )	{	document.write('おやつの時間です。');	}

   else if( hr <= 17 )	{	document.write('そろそろ夕方ですね。');	}

   else if( hr <= 19 )	{	document.write('そろそろ夕食ですか？');	}

   else if( hr <= 21 )	{	document.write('こんばんは。');	}

   else if( hr <= 23 )	{	document.write('ネットが混み出す頃ですね。');	}

}

上記で、時刻によって異なるメッセージを表示するための Greeting という名前の関数を用意しています。
そして、メッセージを表示させたい箇所に、次の3行を記述しておきます。

<script type="text/javascript" language="JavaScript">

   Greeting();

</script>

これで、この3行を記述した位置に、時刻に応じて異なるメッセージを表示できます。

JavaScriptソースの解説

上記のソースをそのままコピー＆ペーストするだけで実現できます。
以下に、上記のJavaScriptの内容について簡単に説明しておきます。

■Point.1 : 時刻を調べる

時刻に応じて表示を変化させるので、JavaScriptで時刻を調べる必要があります。

var nt = new Date();

var hr = nt.getHours();

1行目で、Dateオブジェクトを作成しています。これで、変数ntに日付情報が入ります。 2行目で、Dateオブジェクトから時間を取りだしています。これで、変数hrに時間の数値（0～23）が入ります。この数値を使って条件分岐を行います。
※変数名nt,hrは自由に変更可能です。

■Point.2 : 条件分岐してメッセージを表示

次に、得られた時刻（時間）を条件として分岐を作成し、メッセージを表示させます。
※改行によってソースが見えにくい場合は、ブラウザのウインドウを最大化するなど、横幅を広げると見やすくなります。

if( hr <= 1 )	 	{	document.write('0～1時台のメッセージ');	}

else if( hr <= 3 )	{	document.write('2～3時台のメッセージ');	}

else if( hr <= 5 )	{	document.write('4～5時台のメッセージ');	}

if文と else if文を使って条件分岐を行っています。上記では、時間が「0」～「1」のときは、「0～1時台のメッセージ」という文字が表示され、時間が「2」～「3」のときは、「2～3時台のメッセージ」という文字が表示されます。以降、追加するときには、else ifの行をそのままコピーして、数値とメッセージを書き換えるだけで使えます。

表示メッセージは、引用符（「'」シングルクォーテーション）で囲まれた日本文を書き換えることで好きなように変更できます。この内側には、HTMLタグを含むこともできます。
ただし、メッセージ内にシングルクォーテーションを含みたい場合は、直前にバックスラッシュ（＝円マーク「\」）を記述して、「 \' 」のようにする必要があります。