本文实例为大家分享了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 href = "css/dateCal.css" 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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_35068659/article/details/114459393