效果图：
html代码:
<div id="date">
<p>
<span id="prev">上一月</span>
<span id="year">2022</span>
<span id="next">下一月</span>
</p>
<h5 id="month">七月</h5>
<ul id="title">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="days"></ul>
</div>
css代码:
*{
margin: 0px;
padding: 0px;
}
#date{
width: 300px;
padding: 10px;
border: 1px solid #000000;
}
#date>p{
display: flex;
}
#date>p>span{
display: inline-block;
width: 100px;
text-align: center;
}
#month{
text-align: center;
font-weight:;
}
#title{
list-style: none;
display: flex;
width: 300px;
padding:;
margin:;
}
#title>li{
flex:;
text-align: center;
width: 100%;
background: #C0C0C0;
}
#days{
height: 250px;
margin-top: 10px;
}
#days>li{
list-style: none;
text-align: center;
float: left;
width: 42.28px;
height: 42.28px;
}
.active{
color:orange;
}
javascript代码:
let date=new Date();
add();
function add(){ let year=date.getFullYear()
document.getElementById("year").innerText=year
let month=date.getMonth();
let monthArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
document.getElementById("month").innerText=monthArr[month];
// 获取当天的天数
let currentDay=date.getDate()
// 获取每个月的第一天是周几
let week=new Date(year,month,1).getDay();
let html=""
// 代表前面空白的li标签
for(var i=0;i<week;i++){
console.log(i)
html+="<li></li>"
}
// 获取每个月的天数的最后一天
let lastDay=new Date(year,month+1,0).getDate()
for(var i=1;i<=lastDay;i++){
if(i==currentDay){
html+=`<li class="active">${i}</li>`
}else{
html+=`<li>${i}</li>`
}
}
document.getElementById("days").innerHTML=html
}
document.getElementById("prev").onclick=function(){
date.setMonth(date.getMonth()-1)
add();
}
document.getElementById("next").onclick=function(){
date.setMonth(date.getMonth()+1)
add();
}
关键代码是
new Date(year,month,1).getDay() 获取每个月的第一个天是星期几
new Date(year,month+1,0).getDate() 获取每个月的最后一天是几号