Blogger Information
Blog 8
fans 0
comment 0
visits 4374
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
日历的制作
风轻云淡
Original
758 people have browsed it

<!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>

Correcting teacher:PHPzPHPz

Correction status:unqualified

Teacher's comments:1.代码有问题,无法运行,应该是符号的问题 2.代码放入代码块
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post