jquery完成一个日历demo练习总结

---

jquery草草基本看完，今天在前端网看到一个jquery完成的日历demo就模仿着写了一下，当然问题还是很多．

---

算法描述

 - 创建当前月份，年份函数并且返回直．
 - 创建日历函数，并且给出年份，月份两个变量．
 - 获取所要显示月份，年份函数，并返回直．
 - 页面加载时添加当前年份和月份

创建日历函数算法

 １. 首先用.appendTo(）方法将日历页面元素置入．$("所需要放入元素的class名（ID名什么均可）")，采用jQuery选择器方式．

 ２. 获取当月的第一天．
     var n1time = new Date(nowy, nowm, 1);

 ３．获取当月第一天的星期.
     var firstday = n1time.getDay();

 ４．建立月份的天数数组
   (在这之前必须判断是否闰年
     function isleapyear(year) {
             return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));};)

    *创建月份天数数组*
    　var month_dnarr = [31, 28 + isleapyear(nowy), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

 ５．获取当月所需的行数
    　var tr_num = Math.ceil((month_dnarr[nowm] + firstday) / 7);

 ６．循环行数

 ７．循环单元格
    for (i = 0; i < tr_num; i++) {//循环行数
        var $hxcrltr = "<tr class='hxcrltr" + i + "'></tr>";
            $($hxcrltr).appendTo($myrqtable);
            for (k = 0; k < 7; k++) {//循环单元格
               tdnum = i * 7 + k;
               date_str = tdnum - firstday + 1;
              (date_str <= 0 || date_str > month_dnarr[nowm]) ? date_str = "&nbsp;": date_str = tdnum - firstday + 1;
              date_str == nowd ? ($hxcrltd = "<td bgcolor='#6F524A' style='color:white'>" + date_str + "</td>") : ($hxcrltd = "<td>" + date_str + "</td>");//判断是否为当天，并高亮显示，如修改可直接修改td内联样式即可
            $($hxcrltd).appendTo($(".hxcrltr" + i));

 ８．遍历该table中全部td，当月所有已过日期，灰色显示
 　　　$(".hxcrltable tr:not(:lt(2)) td").each(function() {
     　　　if (date_str < nowd) {      
         　　　$(this).css("color", "#CCCCCC");};
      });

在获取的显示月份年份中

 １. 点击月份减按钮，月份递减，遇到１月自动加载到前一年的１２月．
     - 动态获取当前所示的月份，减去１．
     - 动态获取当前所示的年份．
     - 判断月份是否大于０，如果大于０，自减１，如果不是，则将其月份变为１１，年份自减１．
     - 调用日历函数，加载改变后的年份和月份．

 ２．点击月份增加按钮，月份增加到12月自动加载到下一年的1月．
     - 动态获取到当前所示的月份，并且减去１，我们的月份是从0开始计算．
     - 动态获取到当年所示的年份
     - 判断当前所示月份是否小于１１，如果小于１１，自增１;如果大于１１，我们的年份自增１，并且月份变为０．
     - 调用日历函数，加载改变后的年份和月份．

---

多半采用原作者，我只能算是整理
原文链接