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开始计算．     - 动态获取到当年所示的年份     - 判断当前所示月份是否小于１１，如果小于１１，自增１;如果大于１１，我们的年份自增１，并且月份变为０．     - 调用日历函数，加载改变后的年份和月份．

---

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