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 へ

■　解説

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

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

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

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

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


このページのTop へ