Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.91 - 今日は何の日?


今日は何の日かを表示してみます。


Step テーマ
● とくになし

実行例


● 本日の行事は何もありません。



リスト


<script type="text/javascript"><!--
myTbl = new Array(// 行事テーブル(月,日,メッセージ)
1,1,"元旦",
1,14,"成人の日",
2,11,"建国記念の日",
4,29,"みどりの日",
5,3,"憲法記念日",
5,4,"国民の日",
7,20,"海の日",
9,15,"敬老の日",
10,14,"体育の日",
11,3,"文化の日",
11,23,"勤労感謝の日",
12,23,"天皇誕生日"
);
 
function myWrite(){
myMess = "";// メッセージ表示用
myTblCnt = myTbl.length / 3;// テーブルの数を取得/計算
myD = new Date();// 現在の日付取得
myMonth = myD.getMonth()+1;// '月'取得
myDate = myD.getDate();// '日'取得
for(i=0; i<myTblCnt; i++){// テーブルの数だけループ
if (myTbl[i*3] == myMonth && myTbl[i*3+1] == myDate){// '月' と '日'が一致したら..
myMess += "● " + myTbl[i*3+2] + "<BR>";// 行事メッセージ追加
}
}
if ( myMess != "" ) document.getElementById( "info" ).innerHTML = myMess;// 行事を表示
}
// --></script>
 
<DIV id="info">● 本日の行事は何もありません。</DIV>
<script type="text/javascript"><!--
myWrite();
// --></script>


サンプルだけの HTMLは こちらへ

説明


[Q] ”今日は何の日か” を表示できますか?
[A] 今日は何の日か、今日の行事、本日のスケジュールなどを表示するようにしてみます。


myTbl に 行事を 月、日、内容 の順にセットします。
myTbl = new Array(// 行事テーブル(月,日,メッセージ)
1,1,"元旦",
1,14,"成人の日",
2,11,"建国記念の日",
4,29,"みどりの日",
5,3,"憲法記念日",
5,4,"国民の日",
7,20,"海の日",
9,15,"敬老の日",
10,14,"体育の日",
11,3,"文化の日",
11,23,"勤労感謝の日",
12,23,"天皇誕生日"
);
同じ月日で重複した場合は、上から表示していきます。


表示したい場所に、DIVタグを設置して、ルーチンを呼びます。
<DIV id="info">● 本日の行事は何もありません。</DIV>
<script type="text/javascript"><!--
myWrite();
// --></script>


myWrite() 内で、Hit した行事を表示します。
for(i=0; i<myTblCnt; i++){// テーブルの数だけループ
if (myTbl[i*3] == myMonth && myTbl[i*3+1] == myDate){// '月' と '日'が一致したら..
myMess += "● " + myTbl[i*3+2] + "<BR>";// 行事メッセージ追加
}
}
if ( myMess != "" ) document.getElementById( "info" ).innerHTML = myMess;// 行事を表示


Q&A


[Q] "●"マークの部分を画像にしたいのですが
[A] 以下に変更してください。

myMess += "● " + myTbl[i*3+2] + "<BR>";// 行事メッセージ追加
          ↓
myMess += "<img src='icon.gif'> " + myTbl[i*3+2] + "<BR>";// 行事メッセージ追加



 
イヌでもわかるJavaScript講座 お品書き へ戻ります