フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > カレンダー  

カレンダー

原案:臥龍 鳳雛 氏 (2000/04/01 登録)

 今月のカレンダーを表示してみます。

表示サンプル

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>カレンダー</title>
<script type="text/javascript">
<!--
function MakeArray(n){
    this.length=n;
}
// -->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var ma = new MakeArray(12);

ma[0] =31;
ma[1] =28;
ma[2] =31;
ma[3] =30;
ma[4] =31;
ma[5] =30;
ma[6] =31;
ma[7] =31;
ma[8] =30;
ma[9] =31;
ma[10] =30;
ma[11] =31;

var wk = "日月火水木金土"//曜日の準備
var td = new Date();//今日の日付の拾得
var y,m,d,w,hour,min,sec,fw,ttl;//準備
year = td.getYear();//年は?
m = td.getMonth() + 1;//月は?
d = td.getDate();//日は?
w = td.getDay();//曜日は?
hour = td.getHours();//時間は?
min = td.getMinutes();//分は?
sec = td.getSeconds();//秒は?

td.setDate(1);//一日にしてみる
fw=td.getDay();//曜日は?

if((year % 4)==0){
    if((year % 100)!=0){
        ma[1] =ma[1] +1;
    }
    else{
        if((year % 400)==0)
            ma[1] =ma[1] +1;
        }
    }

document.write("<div style='text-align:center'>");
document.write("<strong>"+m+"月</strong>");
document.write("<table style='margin-left:auto;margin-right:auto'>");
ttl="<tr><td><span style='color:#FF0000'>日</span></td><td>月</td><td>";
ttl=ttl+"火</td><td>水</td><td>木</td><td>金</td><td>";
ttl=ttl+"<span style='color:#0000FF'>土</span></td></tr><br>";
document.write(ttl);

for(y=0;y<6;++y){
    document.write("<tr>");
        for(x=0;x<7;++x){
            t=y*7+x+1-fw;
        if(t>0 && t <= ma[m-1])
            op=(y*7+x+1-fw);
        else
            op="";
        if(t==d){
            op="<td style='background-color:#000000;text-align:right'><span style='color:#FFFFFF'>"+op;
            op=op+"</span></td>"
        }
        else{
            if(x==0)
                op="<span style='color:#FF0000'>"+op+"</span>"
            if(x==6)
                op="<span style='color:#0000FF'>"+op+"</span>"
            op="<td style='text-align:right'>"+op+"</td>";
        }
        document.write(op);
    }
    document.write("</tr>");
}
document.write("</table>");
document.write("</div>");
// -->
</script>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.