設定した日付から有効期間内の場合のみ、指定した画像が表示されるスクリプトです。
例えばお正月期間にはお正月用アイコンを表示させる、一定期間だけ画像を表示させる、
と言った使い道があります。
サンプルでは2月1日、2月10日、2月20日から、それぞれ3日間だけ、画像が表示されるように設定しています。
それ以外の日付では、何も表示されません。
マシンの日付を色々と変更して確認してみてください。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
//表示する期間を指定する。3なら3日間、4なら4日間
kijitu=3;
//画像の横幅を指定する
pic_width=25;
//画像の高さを指定する
pic_height=25;
//画像の代替文字を指定する
pic_name="数";
//画像のURLを指定する
pic_url="0.gif";
function DayPic(moji)
{
datas=new Array();
datas=moji.split(",");
hiduke=new Date();
ima=hiduke.getTime();
my=new Date(datas[0]+'/'+datas[1]+'/'+datas[2]).getTime();
if(my < ima && my+(kijitu*24*60*60*1000) > ima)
document.write('<img src="'+pic_url+'" width="'+pic_width+'" height="'+pic_height+'" border="0" alt="'+pic_name+'">');
}
//-->
</script>
</head>
<body>
その1(2002/02/01から2002/02/03の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<br><br>
その2(2002/02/10から2002/02/13の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
<br><br>
その3(2002/02/20から2002/02/23の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,20');
//-->
</script>
<br><br>
</body></html>
[ 解説 ]
まず、画像を表示させたい期間を設定します。
ソースの上から5行目にある
kijitu=3;
に、設定したい期間をご記入下さい。
サンプルでは3日間を設定期間にしていますので、「3」の数字が入っています。
もし5日間にしたければ「kijitu=3;」に、
7日間にしたければ「kijitu=7;」にして下さい。
次に、画像のサイズを設定します。
ソースの上から6行目と7行目をご覧下さい。
pic_width=25;
pic_height=25;
の「pic_width=25;」が画像の横幅、「pic_height=25;」が高さを表しています。
ここで、表示させる画像の横幅と高さを、それぞれ指定してください。
続いて、画像のaltを指定します。
ソースの上から8行目にある
pic_name="数";
で、「数」の部分に適切な文字列をご記入下さい。
次は、画像ファイルのURLを指定します。
ソースの上から9行目にある
pic_url="../0.gif";
に、表示させたい画像のURLをご記入下さい。
最後に、画像を表示させたい場所に、呼び出し部分を埋め込みます。
ボディ内にある
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,20');
//-->
</script>
が、それぞれの呼び出し部分です。
（サンプルにある「その1」などは、便宜上くっつけているだけです。）
同じものが3つありますが、それぞれ数字が少しずつ違いますね。
これは、設定した期間の開始日を表しています。
例えば「その1」では「2月1日から3日間」を指定していますので「2002,2,1」、
「その2」では「2月10日から3日間」を指定していますので「2002,2,10」
と言う形になっています。
設定したい期間の開始日に書き替えて、ご利用下さい。
また、もっと呼び出し部分を増やしたい場合は、
同じ形式で増やした後、開始日部分をそれぞれ書き替えて下さい。
例えばサンプルから呼び出し部分を1つ削除する場合は、以下のようになります。
| 変更前 |
|---|
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,20');
//-->
</script>
|
| 変更後 |
|---|
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
|
反対に、呼び出し部分を増やす場合は削除する場合と逆で呼び出し部分を増やしていきます。
例えばサンプルにデータを1つ追加すると、以下のようになります。
| 変更前 |
|---|
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,20');
//-->
</script>
|
| 変更後 |
|---|
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,10');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,2,20');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
DayPic('2002,3,1');
//-->
</script>
|
（補足）
使用する画像ですが、サイズが大きいものではなく、小さめのものを使用してください。
サイズが大きい場合は読み込みに時間が掛かる為、表示されるまで時間が掛かってしまいます。
|
