效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实现日历</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.btns {
width: 350px;
height: 35px;
margin: 20px auto 0px;
border: 1px solid #999;
border-radius: 4px 4px 0px 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.btns .btn {
width: 80px;
height: 35px;
/* background-color: red; */
line-height: 35px;
text-align: center;
color: #333;
cursor: pointer;
transition: all .4s ease;
user-select: none;
}
.btns .btn:hover {
background-color: rgb(133, 133, 204);
color: #fff;
}
.prev-month {
border-radius: 4px 0px 0px 4px;
}
.next-month {
border-radius: 0px 4px 4px 0px;
}
.month-box {
width: 150px;
height: 35px;
text-align: center;
line-height: 35px;
color: darkblue;
font-size: 16px;
}
.container {
width: 350px;
margin: 0px auto;
border: 1px solid #999;
}
.container .week {
width: 350px;
height: 50px;
margin: 0 auto;
line-height: 50px;
/* border: 1px solid red; */
background-color: rgb(221, 227, 248);
display: flex;
}
.container .week li {
width: 50px;
height: 100%;
text-align: center;
/* background-color: red; */
}
.container .weekdays {
width: 350px;
/* height: 300px; */
/* background-color: red; */
display: flex;
flex-wrap: wrap;
}
.container .weekdays li {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
/* border: 1px solid #000; */
}
.disabled {
background-color: rgb(235, 232, 232);
/* 鼠标禁用 */
cursor: not-allowed;
}
.container .weekdays li.active {
background: darkcyan;
color: #fff;
}
</style>
</head>
<body>
<div class="btns">
<div class="prev-month btn">上一月</div>
<div class="month-box"></div>
<div class="next-month btn">下一月</div>
</div>
<div class="container">
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="weekdays">
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let now = new Date();
let today = now.getDate();
let totleDays = 0;
let global_month = now.getMonth() + 1;
let global_year = now.getFullYear();
$(".month-box").html(now.getFullYear() + "." + (now.getMonth() + 1));
$(".prev-month").click(function () {
now.setMonth(now.getMonth() - 1);
initCalendar();
$(".month-box").html(now.getFullYear() + "." + (now.getMonth() + 1));
});
$(".next-month").click(function () {
now.setMonth(now.getMonth() + 1);
initCalendar();
$(".month-box").html(now.getFullYear() + "." + (now.getMonth() + 1));
});
function initCalendar() {
$(".weekdays").empty();
let month = now.getMonth() + 1;
let year = now.getFullYear();
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
totleDays = 31;
break;
case 1:
case 4:
case 6:
case 9:
case 11:
totleDays = 30;
break;
default:
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
totleDays = 29;
} else {
totleDays = 28;
}
break;
}
for (let i = 1; i <= totleDays; i++) {
let li = $("<li/>").html(i);
if (i === today && year === global_year && month === global_month) {
li.addClass("active");
}
$(".weekdays").append(li);
}
now.setDate(1);
// 获得本月的第一天为周几
let firstDay = now.getDay();
for (let i = 0; i < firstDay; i++) {
now.setDate(now.getDate() - 1);
let li = $("<li/>").html(now.getDate()).addClass("disabled");
$(".weekdays").prepend(li);
}
// 将减掉的天数加回来
now.setDate(now.getDate() + firstDay);
now.setDate(totleDays);
// 获得本月的第一天为周几
let lastDay = 6 - now.getDay();
for (let i = 0; i < lastDay; i++) {
now.setDate(now.getDate() + 1);
let li = $("<li/>").html(now.getDate()).addClass("disabled");
$(".weekdays").append(li);
}
// 将加上的天数减回来
now.setDate(now.getDate() - lastDay);
now.setDate(1);
}
initCalendar();
})
</script>
</body>
</html>
