jQuery实现日历效果

时间：2021-05-26

本文实例为大家分享了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);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章