js+html+css实现的简单日历编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#data{
width: 560px;
border: 1px solid #000000;
margin: 20px auto;
background: url("1.jpg") no-repeat fixed;
}
#data > p{
display: flex;
padding: 10px;
font-size: 18px;
}
#data > h5{
text-align: center;
padding: 10px;
font-size: 18px;
}
#data > p > span{
padding: 0 10px;
}
#prev,#next{
cursor: pointer;
}
#nian{
flex: 1;
text-align: center;
}
#title{
overflow: hidden;
list-style: none;
background: #ccc;
}
#title > li{
float: left;
width: 80px;
height: 34px;
line-height: 26px;
text-align: center;
padding: 10px 0;
font-size: 18px;
}
#date{
overflow: hidden;
list-style: none;
}
#date > li{
float: left;
width: 74px;
height: 70px;
margin: 1px 1px;
border: 2px solid rgba(0,0,0,0);
line-height: 68px;
text-align: center;
cursor: pointer;
font-size: 18px;
}
#date > .hover:hover{
border: 2px solid paleturquoise;
color: paleturquoise;
}
.active{
color: red;
}
</style>
</head>
<body>
<div id="data">
<p>
<span id="prev">上一月</span>
<span id="nian">2022</span>
<span id="next">下一月</span>
</p>
<h5 id="yue">五月</h5>
<ul id="title">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="date">
</ul>
</div>
<script>
let date = new Date(); //获取默认时间对象
add(); //当页面第一次进入进行渲染一下
function add() {
let cYear = date.getFullYear(); //获取当前的年份
let cMonth = date.getMonth(); //获取当前的月份 0-11
let cDay = date.getDate(); //当前的天
//每个月的第一天,是周几
let zhou =new Date(cYear,cMonth, 1).getDay();
//获取每个月的天数
let days = new Date(cYear,cMonth+1, -1).getDate()+1; //每个月的天数
let arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",];
document.getElementById("nian").innerHTML=cYear;
document.getElementById("yue").innerHTML=arr[cMonth];
let html='';
for(var i=0; i<zhou; i++) {
html+='<li></li>';
}
for(var i=1; i<=days; i++) {
if(i==cDay) {
html += '<li class="active">' + i + '</li>';
}else{
html += '<li class="hover">' + i + '</li>';
}
}
document.getElementById('date').innerHTML=html;
}
document.getElementById('prev').onclick=function(){
date.setMonth(date.getMonth()-1);
add();
};
document.getElementById('next').onclick=function(){
date.setMonth(date.getMonth()+1);
add();
}
</script>
</body>
</html>