爱站程序员基地本文实例为大家分享了jQuery实现日历效果的具体代码，供大家参考，具体内容如下
jquery是用的是2.0版本。
1、html代码
<!DOCTYPE html><!--基于W3C标准 不用做任何修改--><html><!--起始标准--><head><!--设置初始化文档信息和文档管理标注--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><!--整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文--><!--页面三要素--><title>显示详细签到详情</title><style>* {margin: 0px;padding: 0px;font-size: 14px;font-family: \'微软雅黑\'}.signincalendar {}.signincalendar table {margin: 0 auto;border-radius: 0.5em;border: 1px solid #00D3D3;box-shadow: 0px 0px 7.5px 5px #00D3D3;}.signincalendar table tr {}.signincalendar table tr td {width: 50px;height: 34px;text-align: center;border: 1px solid black;border-radius: 0.5em;font-weight: bolder;}.signincalendar table tr.firsttr td, .signincalendar table tr.secondtr td{border: 0px;}table tr.secondtr td:nth-child(1) {color: #E13838;border-radius: 0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(2) {color: orange;border-radius:0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(3) {color: #C2C200;border-radius:0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(4) {color: green;border-radius:0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(5) {color: #00D3D3;border-radius:0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(6) {color: blue;border-radius:0px -1px 1px #FFFF68;}table tr.secondtr td:nth-child(7) {color: purple;border-radius: 0px -1px 1px #FFFF68;}table tr td.cantsign {background: none repeat scroll 0% 0% #9B9B9B;color: #F2F2F2;}table tr.threetr td {background: #9AFAA0;}</style></head><body><div data-role=\"content\"><div class=\"signincalendar\"></div></div><script type=\"text/javascript\" src=\"jquery1.9.js\"></script><script type=\"text/javascript\" src=\"mycanledar.js\"></script></body></html>
2、以下是mycanledar.js的代码
// JavaScript Documentvar nstr = new Date(); // 获取当前日期var changedYear = nstr.getFullYear(); // 年份var changedMonth = nstr.getMonth(); // 月份var dnow = nstr.getDate(); // 今日日期var n1str = new Date(changedYear, changedMonth, 1); // 当月第一天Datevar initfirstday = n1str.getDay(); // 当月第一天星期几var daynumber = getMonthAllDay(changedMonth, changedYear);showCanledar(changedMonth, initfirstday, dnow, daynumber);reloadyear();reloadmonth(1);function reloadyear() {var initYearSelect = $(\"#currentyear option\");initYearSelect.each(function() {if ($(this).val().substring(0, 4) == changedYear) {$(this).attr(\"selected\", true);}});}function reloadmonth(isinit) {var initMonthSelect = $(\"#currentmonth option\");initMonthSelect.each(function() {if (isinit == 1) {if ($(this).index() == changedMonth) {$(this).attr(\"selected\",true);}} else {if ($(this).index() == changedMonth - 1) {$(this).attr(\"selected\", true);}}});}// 是否为闰年function is_leap(year) {return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0): res = (year % 4 == 0 ? 1 : 0));}// 获得下拉列表的年function getNewYear() {// alert(\"得到年\");return $(\"#currentyear option:selected\").text().substring(0, 4);}// 获得下拉列表的月function getNewMonth() {// alert(\"得到月\");return $(\"#currentmonth option:selected\").text();}// 获取当月的天数function getMonthAllDay(month, year) {var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30,31, 30, 31);return m_days[month];}// 获得某年某月某日是星期几function getFirstWeekDay(year, month, day) {var date = new Date();date.setFullYear(year);date.setMonth(month);date.setDate(day);return date.getDay();}// 获得表格行数function requiredRows(allday, firstday) {var trstr = Math.ceil((allday + firstday) / 7);// alert(\"trstr\"+trstr);return trstr;}/* 显示日历 */function showCanledar(month, firstday, dnow, allday) {var rows = requiredRows(allday, firstday);var tb = \"<table data-role=\'none\' cellpadding=\'0px\' cellspacing=\'3px\' id=\'dates\'>\";tb += \"<tr class=\'firsttr\'><td colspan=\'7\' align=\'center\'>\";tb += \"<select data-role=\'none\' id=\'currentyear\'><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option></select>\";tb += \"<select data-role=\'none\' id=\'currentmonth\'><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select>\";tb += \"</td></tr>\";tb += \"<tr class=\'secondtr\'>\";tb += \"<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>\";tb += \"</tr>\";for (var i = 0; i < rows; i++) {tb += \"<tr>\";for (var k = 0; k < 7; k++) { // 表格每行的单元格var idx = i * 7 + k; // 单元格自然序列号var date_str = idx - firstday + 1; // 计算日期(date_str <= 0 || date_str > allday) ? tb+=\"<td style=\'background:#DBDBDB\'> </td>\": tb += \"<td>\" +date_str + \"</td>\"; // 过滤无效日期（小于等于零的、大于月总天数的）// 打印日期：今天底色为红// 查询月签到情况}tb += \"</tr>\";// 表格的行结束}tb += \"</table>\"; // 表格结束$(\".signincalendar\").html(tb);}/** 改变年后触发事件,jquery1.9版本废除了live()方法，使用on代替* */var reg = new RegExp(\"^[0-9]*$\");$(function() {$(document).on(\'change\', \'#currentyear\',function() {changedYear = getNewYear();changedMonth = getNewMonth();commChanged();reloadyear();reloadmonth(0);});$(document).on(\'change\',\'#currentmonth\', function() {changedMonth = getNewMonth();commChanged();reloadyear();reloadmonth(0);});});function commChanged() {var firstweekday = getFirstWeekDay(changedYear, parseInt(changedMonth) - 1,1);// alert(\"firstweekday=\"+firstweekday);var allday = getMonthAllDay(parseInt(changedMonth) - 1, changedYear);// alert(\"allday=\"+allday);showCanledar(changedMonth, firstweekday, 9, allday);}
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- 基于jquery实现日历签到功能
- jQuery EasyUI API 中文文档 – Calendar日历使用
- 为开发者准备的10款最好的jQuery日历插件
- jQuery简单实现日历的方法
- jQuery写的日历(包括日历的样式及功能)
- jQuery 联动日历实现代码
- .net mvc页面UI之Jquery博客日历控件实现代码
- php+mysql+jquery实现日历签到功能
- JQuery日历插件My97DatePicker日期范围限制
- Jquery日历插件制作简单日历
