演习一个日历例子,输出一个日历,显现当前日期为赤色
重要的明白和掌握点是:

1. 运用Date()函数

2. 依据天数盘算日历的长度,重假如行,由于列是牢固的,一周只要7天

3. 依据天数盘算各天安排的单元格位置

4. 每个月第一天的特别处置惩罚

5. 许多时刻是从索引0最先盘算,比方0-11代表12个月之类

6. 一个包含12个月的天数的数组

效果图:

日    一    二    三    四    五    六
                    1    2    3
4    5    6    7    8    9    10
11    12    13    14    15    16    17
18    19    20    21    22    23    24
25    26    27    28    29    30    31

代码:

    function is_leap(year) {
        return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
    } //是不是为闰年

    var nstr = new Date(); //当前Date资讯
    var ynow = nstr.getFullYear(); //年份
    var mnow = nstr.getMonth(); //月份
    var dnow = nstr.getDate(); //本日日期
    var n1str = new Date(ynow, mnow, 1); //传入猎取到的年月,而且日设置为1,猎取当月的第一天的日期信息

    var firstday = n1str.getDay(); //当月第一天礼拜几

    var m_days = new Array(31, 28 + is_leap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的总天数

    //月份天数+第一天礼拜几 除以7,猎取整数行数,然后取整,获得表格所须要行数,即这个月的天数须要排若干行
    var tr_str = Math.ceil((m_days[mnow] + firstday) / 7);

    //打印表格第一行（有礼拜标志）(表头)
    document.write("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");

    //举例是2016年12月,有31天
    for (var i = 0; i < tr_str; i++) { //表格的行,依据当前月份的天数来肯定这个月要排若干行
        document.write("<tr>");//表格的行最先
        for (var k = 0; k < 7; k++) { //表格每行的单元格,每行只要7格,0-6
            //单元格天然序列号,当前行号乘以7再加受骗前行的空格号
            idx = i * 7 + k; //比方第一行的第一格就是0x7+0 =0
            date_str = idx - firstday + 1; //盘算日期,比方第一行第一格就是0-当月的第一天(现在当月第一天是周四即4)+1,即是-3是一个负数,负数会显现空格(参看下面)
            //掌握日期的值在差别的礼拜内里显现,假如20号是周一的话,那末就要放在周一的列内里,云云类推
            (date_str <= 0 || date_str > m_days[mnow]) //过滤无效日期（小于即是零的、大于月总天数的）
                ? date_str = "&nbsp;" //显现空格
                : date_str = idx - firstday + 1; 
            //打印日期：本日底色为红
            date_str == dnow
                ? document.write("<td align='center' bgcolor='red'>" + date_str + "</td>")
                : document.write("<td align='center'>" + date_str + "</td>");
        }
        document.write("</tr>"); //表格的行完毕
    }

    document.write("</table>"); //表格完毕

这里有几个重点:

1. Math.ceil((m_days[mnow] + firstday) / 7)
   A: 将当月的日数和1号左侧的空缺格相加是由于第一天可能会排在其他空格内里,所以要把第一天左侧的空格的数目也加上,

如许才相符日历的设想,除以7是由于一个礼拜只要7天,然后举行取整,比方将4.5行取整为5行

1. idx = i * 7 + k;
   A: 这是作为日历的每个格的编号用的,由于假如不如许运用的话,没办法将第一行输出0-6,

然后第二行输出7-13,然后第三行14-20……所以这里须要用 i*7 +k 来完成这个花样

1. date_str = idx - firstday + 1;
   A: firstday是猎取当月的第一天的周几,用日历的每个格的编号来减去 firstday 的话,能够肯定每个格的日期,

日    一    二    三    四    五    六
-4    -3    -2    -1    0    1    2
3    4    5    6    7    8    9
10    11    12    13    14    15    16
17    18    19    20    21    22    23
24    25    26    27    28    29    30

然则考虑到没有0的最先日期,所以须要额外加一
所以,(date_str <= 0 || date_str > m_days[mnow]) 这个推断就是为了过滤负数和凌驾31的日期