js中的小案例(一)
2021-03-14 08:38
标签:log list color lse png 一个 spl font orange 效果图: html代码: css代码: javascript代码: 关键代码是 new Date(year,month,1).getDay() 获取每个月的第一个天是星期几 new Date(year,month+1,0).getDate() 获取每个月的最后一天是几号 js中的小案例(一) 标签:log list color lse png 一个 spl font orange 原文地址:https://www.cnblogs.com/shanchui/p/12812516.html div id="date">
p>
span id="prev">上一月span>
span id="year">2022span>
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>
*{
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: 400;
}
#title{
list-style: none;
display: flex;
width: 300px;
padding: 0;
margin: 0;
}
#title>li{
flex: 1;
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;
}
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