简易的效果图：
废话不多说，直接代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
border: 2px solid #ccc;
margin: 0 auto;
}
.header {
width: 100%;
height: 40px;
border-bottom: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.month {
margin: 0 30px;
}
.option {
font-size: 30px;
font-weight: bolder;
color: #ccc;
cursor: pointer;
}
ul li {
list-style: none;
}
ul {
width: 100%;
height: 40px;
display: flex;
justify-content: left;
align-items: center;
flex-wrap: wrap;
}
li {
width: 14%;
line-height: 40px;
border: 1px solid #ccc;
text-align: center;
}
.mon2 {
color: #ccc;
}
.mon3 {
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="header">
<div class="option" onclick="next()">《</div>
<div class="month"></div>
<div class="option" onclick="prev()">》</div>
</div>
<div class="content">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<ul id="dates">
</ul>
</div>
</div>
</body>
<script>
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = document.getElementById('dates')
getlist(2023, 1)
var todaty = document.querySelector('.month');
todaty.innerHTML = year + '年' + month + '月';
// 月--
function next() {
if (month > 1) {
month--;
} else if (month == 1) {
month = 12;
year--;
}
todaty.innerHTML = year + '年' + month + '月';
getlist(year, month)
}
// 月++
function prev() {
if (month < 12) {
month++;
} else if (month == 12) {
month = 1;
year++;
}
todaty.innerHTML = year + '年' + month + '月';
getlist(year, month)
}
// 计算该月天数
function calculateDay(years, mons) {
let arr = []
if (years % 4 == 0 && years % 100 != 0 || years % 400 == 0) {
arr = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
} else {
arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
}
return arr[mons - 1]
}
// 得到天数展示数组
function getlist(years, mons) {
var old, now, future //上一个月/本月/下一个月天数
now = calculateDay(years, mons)
if (mons == 1) {
old = calculateDay(years - 1, 12)
future = calculateDay(years, mons + 1)
} else if (mons == 12) {
old = calculateDay(years, mons - 1)
future = calculateDay(years + 1, 1)
} else {
old = calculateDay(years, mons - 1)
future = calculateDay(years, mons + 1)
}
var fristday = new Date(mons + "/1/" + years + " 00:00:00").getDay() //本月第一天周几
var lastday = new Date(mons + "/" + now + "/" + years + " 00:00:00").getDay() //本月最后一天周几
var oList = getfor(old, (mons == 1 ? 13 : mons) - 1) //上一个月天数集合
var nList = getfor(now, mons) //本月天数集合
var fList = getfor(future, (mons == 12 ? 0 : mons) + 1) //下一个月天数集合
if (fristday == 1) {
var a = []
} else {
var a = oList.slice(-((fristday == 0 ? 7 : fristday) - 1))
}
var b = fList.slice(0, (7 - (lastday == 0 ? 7 : lastday)))
// a是本月第一周上个月剩下的天数，b是本月最后一周下个月会有那几天在
var obj = [...a, ...nList, ...b]
var elementArray = [];
for (let i = 0; i < obj.length; i++) {
var str
if (obj[i].m == mons) {
if (obj[i].d == new Date().getDate()) {
str = `
<li class="mon3">${obj[i].d}</li>
`;
} else {
str = `
<li class="mon">${obj[i].d}</li>
`;
}
} else {
str = `
<li class="mon2">${obj[i].d}</li>
`;
}
elementArray.push(str)
}
dates.innerHTML = elementArray.join('')
}
// 根据天数获取当月天数数组
function getfor(num, mon) {
var arr = []
for (var i = 1; i < num + 1; i++) {
var str = {
m: mon,
d: i
}
arr.push(str)
}
return arr
}
</script>
</html>