日历的制作

<!DOCTYPE html>

<html>
<head>
<title>日历</title>
<style>
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.rili{
border: 1px solid black;
width: 402px;
margin: 0 auto;
}
.top{
margin: 5px 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.xq{
display: flex;
justify-content: space-around;
background-color: #ccc;
}
#yue{
text-align: center;
}
.date{
width: 400px;
height: 300px;
border: 1px solid black;
}

#date>li{
cursor: pointer;
float: left;
border: 1px solid #ccc;
width: 50px;
height: 50px;
margin: 2.5px;
text-align: center;
line-height: 50px;
}
#date>li:hover{
border: 1px solid red;
}
#prev,#next{
cursor: pointer;
}

</style>
</head>
<body>
<section class="rili" id="data">
<div class="top">
<div id="prev">上一月</div>
<div id="nian">2021年</div>
<div id="next">下一月</div>

</div >
<h5 id="yue">12月</h5>

<div class="xq">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div >
<div class="date">
<ul id="date">

</ul>
</div>
</section>
<script>
var odate=new Date()
add()
function add(){
var oyear=odate.getFullYear()
var omonth=odate.getMonth()
var oday=odate.getDate()
//获取每月的第一天是周几
var oweek= new Date(oyear,omonth,1).getDay()
//获取当前月的天数
var odays= new Date(oyear,omonth+1,-1).getDate()+1
document.getElementById(‘nian’).innerHTML=oyear+’年’
document.getElementById(‘yue’).innerHTML=omonth+1+’月’
var oli=’’
for (var j=1;j<=oweek;j++){
oli=’<li></li>‘
}
for(var i=1;i<=odays;i++){
if(i==oday){
oli+=’<li style="color: red">‘+i+’</li>‘
}
else {
oli+=’<li>‘+i+’</li>‘
}

}
document.getElementById(‘date’).innerHTML=oli
}
document.getElementById(‘prev’).onclick=function (){
odate.setMonth(odate.getMonth()-1)
add()
}
document.getElementById(‘next’).onclick=function (){
odate.setMonth(odate.getMonth()+1)
add()
}

</script>

</body>
</html>

更多相关文章

随机推荐