title

Top  >> へっぽこJavaScript  >> 画像で日付表示

画像で日付表示

 概要

 Javascript を使えば、好きな画像で日付を表示させる事ができます。 カウンタに使われるような数字の素材と、年、月、日などの単位の画像を組み合わせます。 但し、クライアント側の日付設定が間違っていると正確に表示されません。


このページのTop へ

 動作


このページのTop へ

 ソース

/* プログラム       :画像で日付表示  */
/* 画像のディレクトリURL  :image_URL    */
/* 画像の拡張子      :extensionension */
/* 月画像のファイル名   :month      */
/* 日画像のファイル名   :day       */

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

	image_URL = "date_image/";
	extension = ".gif";

	date = new Date();
	m  = "0" + (date.getMonth()+1);
	m  = m.substring(m.length-2,m.length);
	d  = "0" + (date.getDate());
	d  = d.substring(d.length-2,d.length);

	document.write("<img src='" + image_URL + m.charAt(0) + extension + "'>");
	document.write("<img src='" + image_URL + m.charAt(1) + extension + "'>");
	document.write("<img src='" + image_URL + "month.gif'>");

	document.write("<img src='" + image_URL + d.charAt(0) + extension +"'>");
	document.write("<img src='" + image_URL + d.charAt(1) + extension +"'>");
	document.write("<img src='" + image_URL + "day.gif'>");

//-->
</script>

このページのTop へ

 解説

 このスクリプトでは、以下の3つの文字列を結合して、HTML タグで画像を指定して日付を表示しています。 画像のあるディレクトリと拡張子は、自分の環境に合わせて変更します。 但し、日付の画像ファイル名は、0〜9とする必要があります。

 まず、new Date() により日付オブジェクトを生成します。 ここから、getMonth() とgetDate() で月日を取得します。 取得される月は、実際の値より1つだけ少なく(つまり1月=0として)取得されるので、1を加えておきます。 取得した月日と、文字列0を繋げます。 例えば、1月を取得したのであれば、01となります。

 次に、substring を利用して文字列の抽出を行います。 substring は、()で指定した数値の範囲で文字列を取り出します。 抽出範囲は、(開始位置 , 終了位置 + 1)で表され、引数が2つの場合は、取得した文字列の長さは、2つの引数の差の絶対値になります。 例えば、「ABCDE」という文字列に対して、substring(1,4)を適用すると、BCD が抽出されます。 このスクリプトでは、(文字列の長さ−2,文字列の長さ)の範囲で抽出します。 例えば、11月の場合には、文字列0と繋げられて011となり、文字列の長さは3になります。 従って、抽出範囲はsubstring(1,3)となり、11という文字列が抜き出されます。

 以上のようにして抽出された文字列に対し、特定の1文字をcharAt() で抜き出します。 ()内の数値は、文字列を左から0、1、2番目・・・と数える事を示します。 例えば、12月を示す12の文字列に対するcharAt(0) は1、charAt(1) は2となります。 これにより、各日付に対応した画像ファイル名を指定する事ができます。

 上記のスクリプトでは、すべての日付を2桁で表示するものでした。 if 文のような場合分けを利用すると、1月を01→1などと1桁で表示する事もできます。 また、西暦や時刻なども同じような手段で表示する事ができます。


このページのTop へ