jquery 日历如何制作

jquery-1.8.3.js

Dreamweaver或者可以编写页面代码的编辑软件

引入jquery，编写日历页面代码，下面是一个简单的日历模板，到时候可以根据自身的要求更改样式，以及html代码是否利用jquery编辑html：

现在就是重点来了，首先创建一个方法： function calendarTable（year,month）{}，其中year，month为int类型参数

然后，方法主体中先根据year和month参数得到Date对象以及当前月共有多少天var date = new Date(year + "/" + month + "/1"); var days = 0; if(month == 2 || month == 4 || month == 6 || month == 9 || month == 11){//小月 days = 30; } else if(month == 2) { if(year % 4 == 0 || year % 100 == 0){//闰年是二月份天数 days = 29; } else { days = 28; } } else{//大月 days = 31; }

接着获取当前月第一天是星期几以及系统时间 var index = date.getDay();//0(星期日)-6(星期六) var newYear = new Date().getFullYear();//目前系统时间是哪一年 var nowMonth = new Date().getMonth() + 1;//目前系统时间是哪一月 var nowDay = new Date().getDate();//目前系统时间是几号

最后就是渲染日历html：var rows = $("#body .row"); var day = 1;//循环行 for(var i = 0; i < 6; i++){//循环列 for(var j = index; j < 7; j++){ var html = day; $(rows[i]).find(".column").eq(j).html(html);//为目前系统时间时变色 if(newYear == year && nowMonth == month && nowDay == day){ $(rows[i]).find(".column").eq(j).css({ backgroundColor: "gray", color: "red" }); } if(day == days){ if(i == 5){$("#isshow").css("display","none"); } return; } day++ } index = 0; }

这个只能写出一个日历框架，如要好看一点需自己修改样式

该日历编写思想为：先根据年份和月份找到1号在日历中的位置，再依次填写该月其他日期在日历中的位置