小龅牙o哔哔哔
本文实例为大家分享了jquery实现日历效果的具体代码，供大家参考，具体内容如下
/**
* 2021/3/6
* calendar
*/
/* get y year m month before days
*/
function getbdays( y, m ) {
return (new date(y, m, 1).getday());
}
/* get y year m month total days
*/
function gettdays( y, m ) {
return (new date(y, m + 1, -1).getdate() + 1);
}
/* get y year m month last days
*/
function getbmdays( y, m ) {
return (new date(y, m, -1).getdate() + 1);
}
function calendar( nowdate ) {
// year, month, day
this.year = nowdate.getfullyear();
this.month = nowdate.getmonth();
this.day = nowdate.getdate();
// before days
this.beforedays = getbdays(this.year, this.month);
// current month days
this.totaldays = gettdays(this.year, this.month);
// last month days
this.lastdays = getbmdays(this.year, this.month);
// save now date
this.nowy = nowdate.getfullyear();
this.nowm = nowdate.getmonth();
}
calendar.prototype.initcalendar = function() {
// get calendar id
let caldiv = $("#calendar").append("<table></table>");
// get calendar table
let caltable = $("#calendar > table");
// add calendar table tr
for ( let n = 0; n < 8; n++ ) {
caltable.append('<tr></tr>');
}
// get calendar table tr : header
let calheadtr = $("#calendar > table > tr:first");
// add calendar table tr th
for ( let n = 0; n < 3; n++ ) {
calheadtr.append('<th></th>');
}
// select index > 0 tr
let calbodytr = $("#calendar > table > tr:gt(0)");
// add calendar table tr td
for ( let n = 0; n < 7; n++ ) {
calbodytr.append('<td></td>');
}
}
calendar.prototype.insertdate = function( calname ) {
// get calendar table tr td : header
let calheadth = $("#calendar > table > tr:first > th");
// modify header content
$(calheadth[0]).html("<a><</a>");
$(calheadth[1]).html(`<a>${this.year} 年 ${this.month + 1} 月</a>`);
$(calheadth[2]).html("<a>></a>");
// add style to header
$(calheadth[1]).attr({
"colspan" : 5,
"title" : calname
});
// weekday arrays
const calweekarr = ['日', '一', '二', '三', '四', '五', '六'];
// get calendar table tr td : weekdays
let calweektd = $("#calendar > table > tr:eq(1) > td");
for ( let n = 0; n < 7; n++ ) {
$(calweektd[n]).html(`<a>${calweekarr[n]}</a>`);
}
// get calendar table tr td : body
let calbodytd = $("#calendar > table > tr:gt(1) > td");
// insert before days
for (let n = this.beforedays - 1, lastdays = this.lastdays;
n >= 0;
n--, lastdays--) {
$(calbodytd[n]).html(`<a>${lastdays}</a>`);
$(calbodytd[n]).attr("class", "other-day");
}
// insert current days
for (let n = this.beforedays, i = 1;
i <= this.totaldays;
i++, n++) {
$(calbodytd[n]).html(`<a>${i}</a>`);
if (i == this.day &&
(new date(this.year, this.month, 1).getmonth() == this.nowm) &&
(new date(this.year, this.month, 1).getfullyear() == this.nowy)) {
$(calbodytd[n]).attr("class", "now-day");
}
else {
$(calbodytd[n]).removeattr("class", "now-day");
}
}
// insert after days
for (let n = this.beforedays + this.totaldays, i = 1;
n < calbodytd.length;
n++, i++) {
$(calbodytd[n]).html(`<a>${i}</a>`);
$(calbodytd[n]).attr("class", "other-day");
}
}
calendar.prototype.update = function( newdate ) {
// year, month, day
this.year = newdate.getfullyear();
this.month = newdate.getmonth();
this.day = newdate.getdate();
// before days
this.beforedays = getbdays(this.year, this.month);
// current month days
this.totaldays = gettdays(this.year, this.month);
// last month days
this.lastdays = getbmdays(this.year, this.month);
}
function initdate() {
// create date object
let now = new date();
let cal = new calendar( now );
// init and insert
cal.initcalendar();
cal.insertdate( 'mydate' );
// add click event to th:first
$("#calendar > table > tr:first > th:first").click(function(){
now.setmonth( now.getmonth() - 1 );
cal.update( now );
cal.insertdate( 'mydate' );
});
// add click event to th:last
$("#calendar > table > tr:first > th:last").click(function(){
now.setmonth( now.getmonth() + 1 );
cal.update( now );
cal.insertdate( 'mydate' );
});
}
initdate();
html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>document</title> <link rel="stylesheet" media="screen"> </head> <body> <div id="calendar"></div> <script src="js/jquery.js"></script> <script src="js/datecal.js"></script> </body> </html>
css:
#calendar {
width: 200px;
padding-bottom: 5px;
box-shadow: 0 1px 3px #ccc;
border: 1px solid #ededed;
}
#calendar table {
width: inherit;
text-align: center;
user-select: none;
font-family: "comic sans ms";
border-collapse: collapse;
border-spacing: 0px;
}
#calendar table tr th {
background: #f8f8f8;
font-size: 12px;
}
#calendar table tr:nth-child(2) {
background: #f8f8f8;
}
#calendar table tr td {
font-size: 10px;
}
#calendar table tr td.now-day {
color: red;
}
#calendar table tr td.other-day {
color: lightgray;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
