JavaScript日历案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#calendar {
width: 420px;
height: auto;
overflow: hidden;
border: 1px solid red;
margin: 200px auto;
}
#calendar .head {
display: flex;
height: 40px;
line-height: 40px;
}
#calendar .head a {
flex: 1;
text-align: center;
cursor: pointer;
}
#calendar .head span {
flex: 10;
text-align: center;
}
#calendar .lhead {
display: flex;
height: 35px;
line-height: 35px;
}
#calendar .lhead>* {
flex: 1;
text-align: center;
}
/* #calendar .dlist {
color: black;
} */
#calendar .dlist a {
display: block;
width: 60px;
height: 60px;
overflow: hidden;
line-height: 60px;
text-align: center;
float: left;
}
.tmp {
color: red;
}
.now {
background-color: blueviolet;
}
</style>
<body>
<div id="calendar">
<div class="head">
<a id="prev"><</a>
<span id="showDowDate">2022/4/7</span>
<a id="next">></a>
</div>
<div class="lhead">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<div class="dlist" id="dlist"></div>
</div>
<script>
let date = new Date();
let DateList = document.getElementById('dlist');
let Prev = document.getElementById('prev');
let Next = document.getElementById('next');
setNowDate();
Prev.onclick = function () {
date = getPreviousMonth();
setNowDate();
}
Next.onclick = function () {
date = getNextMonth();
setNowDate();
}
//设置显示抬头年月信息
function setDowDate() {
let dateString = date.getFullYear() + '年' + (fullZero(date.getMonth() + 1)) + '月';
document.getElementById('showDowDate').textContent = dateString;
}
//补零函数
function fullZero(num) {
return num >= 10 ? num : '0' + num;
}
//显示当月日期
function setNowDate() {
setDowDate()
document.getElementById('dlist').textContent = '';
//获取当月 1号 的星期
let firstDayOfNowMonth = getWeekOfDate(date.getFullYear() + '-' + (date.getMonth() + 1) + '-1');
let previousMonthDay = getPreviousMonth().getDate();
//补前
for (let d = (previousMonthDay - firstDayOfNowMonth + 1); d <= previousMonthDay; d++) {
DateList.innerHTML += `<a class="tmp">${d}</a>`;
// console.log(`${d}`);
}
//遍历从1 号至最后一天
let lastDayOfNowMonth = getLastDayOfMonth();
for (let d = 1; d <= lastDayOfNowMonth; d++) {
let isNowDay = (d == date.getDate()) ? 'now' : '';
DateList.innerHTML += `<a class="${isNowDay}">${d}</a>`;
}
//补后
let lastDayWeek = getWeekOfDate(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + lastDayOfNowMonth);
let tmp = (lastDayWeek == 6) ? 7 : 6 - lastDayWeek;
for (let d = 1; d <= tmp; d++) {
DateList.innerHTML += `<a class="tmp">${d}</a>`;
}
}
//获取星期
function getWeekOfDate(date) {
return new Date(date).getDay();
}
//获取某月最后一天
function getLastDayOfMonth(d) {
if (!d) d = date;
let year = d.getFullYear(),
month = d.getMonth() + 1,
day = 0;
switch (month) {
case 4:
case 6:
case 9:
case 11:
day = 30;
break;
case 2:
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
day = 29;
} else {
day = 28;
}
break;
default:
day = 31;
}
return day;
}
//前一个月
function getPreviousMonth() {
let nowMonth = date.getMonth() + 1;
let dateObj = null;
let tmpMonth = (nowMonth == 1) ? 12 : nowMonth - 1;
let tmpYear = (nowMonth == 1) ? date.getFullYear() - 1 : date.getFullYear();
dateObj = new Date(tmpYear + '-' + tmpMonth + '-1');
let lastDay = getLastDayOfMonth(dateObj);
return new Date(`${tmpYear}-${tmpMonth}-${lastDay}`);
}
//下个月
function getNextMonth() {
let nowMonth = date.getMonth() + 1;
let dateObj = null;
let tmpMonth = (nowMonth == 12) ? 1 : nowMonth + 1;
let tmpYear = (nowMonth == 12) ? date.getFullYear() + 1 : date.getFullYear();
let lastDay = getLastDayOfMonth(dateObj);
return new Date(`${tmpYear}-${tmpMonth}-${lastDay}`);
}
</script>
</body>
</html>