設定した日付の場合、指定した背景色が表示されるスクリプトです。
例えばお正月にはお正月用背景色を表示させる、クリスマスにはクリスマス背景色を表示させる、
と言った使い道があります。
サンプルでは1月1日、3月3日、5月5日、12月25日の場合は背景色が変わるように設定しています。
マシンの日付を色々と変更して確認してみてください。
・サンプルを見る
・ソースを保存する (右クリック→「対象をファイルに保存」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
MyMon=new Array();
MyDay=new Array();
MyData=new Array();
//データ1を表示したい月を指定する
MyMon[0]=1;
//データ1を表示したい日を指定する
MyDay[0]=1;
//データ1の背景色を指定する
MyData[0]='#ffffff';
//データ2を表示したい月を指定する
MyMon[1]=3;
//データ2を表示したい日を指定する
MyDay[1]=3;
//データ2の背景色を指定する
MyData[1]='#a52a2a';
//データ3を表示したい月を指定する
MyMon[2]=5;
//データ2を表示したい日を指定する
MyDay[2]=5;
//データ3の背景色を指定する
MyData[2]='#6495ed';
//データ4を表示したい月を指定する
MyMon[3]=12;
//データ2を表示したい日を指定する
MyDay[3]=25;
//データ4の背景色を指定する
MyData[3]='#daa520';
function DayColor()
{
hiduke=new Date();
tuki=hiduke.getMonth()+1;
kyou=hiduke.getDate();
for(i=0; i<MyMon.length; i++)
if(MyMon[i] == tuki && MyDay[i] == kyou)
{ document.bgColor=MyData[i]; break; }
}
//-->
</script>
</head>
<body onLoad="DayColor();">
</body></html>
[ 解説 ]
まず、期日とデータを設定します。
設定するデータは、
背景色を変更する月
背景色を変更する日
背景色
の3つで成り立っています。
サンプルデータを見てみましょう。
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='#ffffff';
まず1行目の「MyMon[0]=1;」でページを変更する月の「1」を指定しています。
次に2行目の「MyDay[0]=1;」でページを変更する日の「2」を指定しています。
最後に3行目の「MyData[0]='#ffffff';」で背景色を指定しています。
同じ書式に従って、データは書き替えてください。
必ず月、日、背景色の3つを書き替えて下さい。
もしデータを減らしたい場合は、データを1つ分(すなわち3行)をまとめて消去します。
例えばサンプルからデータを1つ削除する場合は、以下のようになります。
変更前 |
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='#ffffff';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='#ffb6c1';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='#b0e0e6';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='#9acd32';
|
変更後 |
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='#ffffff';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='#ffb6c1';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='#b0e0e6';
|
反対に、データを増やす場合は削除する場合と逆でデータを増やしていきます。
ただし、この時注意点が1つあります。
データの先頭部分を見てみますと、数値部分がありますね。
各データのまとまりは、全て同じ数値が入っています。
そして次のデータになると、数値が1つ繰り上がっています。
それと同じ要領で、必ず数値部分を1つずつ増やしていく必要があります。
例えばサンプルにデータを1つ追加すると、以下のようになります。
変更前 |
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='#ffffff';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='#ffb6c1';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='#b0e0e6';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='#9acd32';
|
変更後 |
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='#ffffff';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='#ffb6c1';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='#b0e0e6';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='#9acd32';
MyMon[4]=10;
MyDay[4]=1;
MyData[4]='#000000';
|
|