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

缺乏、安全感 2022-06-07 12:41 191阅读 0赞

--------------------

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

--------------------

![这里写图片描述][SouthEast]  
**算法描述**

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

**创建日历函数算法**

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

--------------------

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

[SouthEast]: /images/20220607/3eec730ab2fc426f9f098b937640f816.png
[Link 1]: http://www.qdfuns.com/notes/26857/53026eb079d4c5bd24fcc989f042ce5a.html