title

Top  >> へっぽこJavaScript  >> ランダムメッセージ表示

ランダムメッセージ表示

 概要

 Javascript を利用して、表示されるメッセージをランダムに変化させます。 サイトを訪問した時間によって表示されるメッセージが変化します。 但し、クライアント側の時刻設定が間違っていると正確に表示されません。


このページのTop へ

 動作

 ↓↓ ページを表示した時間帯によって表示されるメッセージが変わります。

  

時間とメッセージ内容
時間 メッセージ内容
0〜6時 夜遅くまでお疲れ様です。
6〜11時 おはようございます。
11〜17時 こんにちは。
17〜20時 こんばんは。
20〜0時 今日も1日お疲れ様です。

このページのTop へ

 ソース

/* プログラム     	:時間帯メッセージ表示		*/
/* メッセージ配列名	:mes(要素数:5)		*/
/* 出力			:取得時間に応じたメッセージ	*/

<script type="text/javascript">
<!--

	mes = new Array(5);
	mes[0]="夜遅くまでお疲れ様です。";
	mes[1]="おはようございます。";
	mes[2]="こんにちは。";
	mes[3]="こんばんは。";
	mes[4]="今日も1日お疲れ様です。";

	date=(new Date()).getHours();

	if( 0 <= date && date <= 5 ){
		document.write(mes[0]);
	}
	else if( 6 <= date && date <= 10 ){
		document.write(mes[1]);
	}
	else if( 11 <= date && date <= 16 ){
		document.write(mes[2]);
	}
	else if( 17 <= date && date <= 19 ){
		document.write(mes[3]);
	}
	else{
		document.write(mes[4]);
	}

//-->
</script>

このページのTop へ

 解説

 このスクリプトでは、表示したいメッセージの種類の数だけ配列を用意します。 用意した配列に、それぞれメッセージを格納しておきます。 次に、new Date() によって日付オブジェクトを生成し、getHours() によって時間を取得します。 if 文を使用して時間帯によって場合分けを行い、それぞれメッセージを出力します。 より細かく時間帯を分割したり、記念日に特定のメッセージを出力したりする事もできます。 また、関数名を付ければ、好きな時に呼び出すことができます。


このページのTop へ