<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 280px;
height: 360px;
margin: 50px auto;
background: url(./QQ图片20201106101305.jpg) no-repeat center;
color: aliceblue;
line-height: 40px;
}
#header {
height: 40px;
color: black;
line-height: 40px;
}
#header span {
float: left;
text-align: center;
margin-top: 10px;
line-height: 40px;
}
#prev,
#next {
width: 20%;
line-height: 40px;
cursor: pointer;
}
#current {
width: 60%;
line-height: 40px;
}
#week li {
width: 40px;
text-align: center;
float: left;
line-height: 40px;
color: black;
}
#content li {
width: 40px;
text-align: center;
float: left;
line-height: 40px;
}
</style>
<div id="box">
<div id="header">
<span id="prev">上</span>
<span id="current">2021-4</span>
<span id="next">下</span>
</div>
<ul id="week">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<div id="content">
</div>
</div>
<script>
var date = new Date();
renderHead(date);
renderUl(date);
$('prev').onclick = function () {
date.setDate(1);
date.setMonth(date.getMonth() - 1);
renderHead(date);
renderUl(date);
}
$('next').onclick = function () {
date.setDate(1);
date.setMonth(date.getMonth() + 1);
renderHead(date);
renderUl(date);
}
function renderHead(date) {
var date = new Date(date);
var y = date.getFullYear();
var m = date.getMonth() + 1;
$('current').innerHTML = y + '-' + m
}
function renderUl(date) {
var prevDays = getPrevDays(date);
console.log(prevDays);
var res = '';
for (var i = 0; i < prevDays.length; i++) {
res += `<li style = "color:blown">${prevDays[i]}</li>`
}
var nowDays = getNowDays(date);
console.log(nowDays);
for (var i = 0; i < nowDays.length; i++) {
res += `<li style="color:black;">${nowDays[i]}</li>`
}
var nextMaxDay = 42 - prevDays.length - nowDays.length;
console.log(nextMaxDay)
for (var i = 1; i <= nextMaxDay; i++) {
res += `<li style = "color:blown">${i}</li>`
}
$('content').innerHTML = res;
}
function getPrevDays(date) {
var date = new Date(date);
date.setDate(0);
var maxdate = date.getDate();
var week = date.getDay() + 1;
var start = maxdate - week + 2;
var arr = [];
for (var i = start; i <= maxdate; i++) {
arr.push(i);
}
return arr
}
function getNowDays(date) {
var date = new Date(date);
date.setDate(1);
date.setMonth(date.getMonth() + 1);
date.setDate(0);
var maxday = date.getDate();
var arr = [];
for (var i = 1; i <= maxday; i++) {
arr.push(i);
}
return arr
}
function $(ele) {
return document.getElementById(ele)
}
</script>