jquery草草基本看完,今天在前端网看到一个jquery完成的日历demo就模仿着写了一下,当然问题还是很多.
算法描述
- 创建当前月份,年份函数并且返回直.
- 创建日历函数,并且给出年份,月份两个变量.
- 获取所要显示月份,年份函数,并返回直.
- 页面加载时添加当前年份和月份
创建日历函数算法
1. 首先用.appendTo()方法将日历页面元素置入.$("所需要放入元素的class名(ID名什么均可)"),采用jQuery选择器方式.
2. 获取当月的第一天.
var n1time = new Date(nowy, nowm, 1);
3.获取当月第一天的星期.
var firstday = n1time.getDay();
4.建立月份的天数数组
(在这之前必须判断是否闰年
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];
5.获取当月所需的行数
var tr_num = Math.ceil((month_dnarr[nowm] + firstday) / 7);
6.循环行数
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));
8.遍历该table中全部td,当月所有已过日期,灰色显示
$(".hxcrltable tr:not(:lt(2)) td").each(function() {
if (date_str < nowd) {
$(this).css("color", "#CCCCCC");};
});
在获取的显示月份年份中
1. 点击月份减按钮,月份递减,遇到1月自动加载到前一年的12月.
- 动态获取当前所示的月份,减去1.
- 动态获取当前所示的年份.
- 判断月份是否大于0,如果大于0,自减1,如果不是,则将其月份变为11,年份自减1.
- 调用日历函数,加载改变后的年份和月份.
2.点击月份增加按钮,月份增加到12月自动加载到下一年的1月.
- 动态获取到当前所示的月份,并且减去1,我们的月份是从0开始计算.
- 动态获取到当年所示的年份
- 判断当前所示月份是否小于11,如果小于11,自增1;如果大于11,我们的年份自增1,并且月份变为0.
- 调用日历函数,加载改变后的年份和月份.
原文链接