实现常有功能，特定日期展示点击功能，有些功能后续继续完善。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--CSS样式-->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#div {
width: 272px;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
background: #ffffff;
border: 1px solid #d2d2d2;
margin: auto;
}
.dateline {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#tbcal {
border-collapse: collapse;
width: 100%;
text-align: center;
color: #ffffff;
}
#tbcal tr td {
width: 36px;
height: 30px;
padding: 5px;
text-align: center;
/* border: 1px solid #cccccc; */
}
.box {
font-size: 14px;
color: #d2d2d2;
}
#title>th {
font-weight: 400;
color: #666;
width: 36px;
height: 30px;
padding: 5px;
text-align: center;
}
.dateline {
border-bottom: 1px solid #cccccc;
}
.footer {
position: relative;
height: 46px;
border-top: 1px solid #e2e2e2;
line-height: 26px;
/* padding: 10px 20px; */
}
.btn {
position: absolute;
right: 10px;
top: 10px;
}
.clear,
.sumbit {
display: inline-block;
cursor: pointer;
font-size: 12px;
height: 26px;
line-height: 26px;
margin: 0 0 0 -1px;
padding: 0 10px;
color: #666;
border: 1px solid #C9C9C9;
background-color: #fff;
white-space: nowrap;
vertical-align: top;
border-radius: 2px;
}
.case {
position: relative;
-webkit-text-size-adjust: 100%;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;
}
.header {
justify-content: space-around !important;
align-items: center;
display: flex;
line-height: 30px;
}
.center {
display: flex;
justify-content: space-between;
align-items: center;
color: #666;
font-size: 14px;
}
.header>.left {
display: flex;
}
.header>.right {
display: flex;
}
.month-btn {
font-size: 18px;
color: #999;
padding: 0 10px;
}
.year-btn {
font-size: 18px;
color: #999;
}
.monthshow {
width: 100%;
height: 100%;
padding: 10px;
display: none;
box-sizing: border-box;
background-color: #fff;
font: 14px Helvetica Neue, Helvetica, PingFang SC, \5FAE\8F6F\96C5\9ED1, Tahoma, Arial, sans-serif;
}
#yearshow {
display: none;
}
.monthnum {
position: relative;
width: 25%;
margin: 17px 0;
height: 36px;
line-height: 36px;
/* margin: 3px 0; */
text-align: center;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.yearnum {
width: 33.3% !important;
}
.headerlimit{
justify-content: space-around !important;
align-items: center;
display: none;
line-height: 30px;
}
</style>
<script type="text/javascript">
// 加载完HTML内容后,JavaScript开始执行
window.onload = function () {
addYear()
addMonth()
showMonth()
showYear()
}
// 显示日历
function show(min = '', max = '') {
// 获取鼠标点击所选择的年月值
var year = parseInt(document.getElementsByClassName("year")[0].innerHTML);
var month = parseInt(document.getElementsByClassName("month")[0].innerHTML);
// console.log(year, "年")
console.log(month, "月")
// 判断是否为闰年,以便确定2月的天数
var flag = year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
// console.log(flag)
var dayofmonth = [31, flag ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// 给date赋值,值为所选择的某年某月一号
var dt = new Date();
// 获取date对应周几
var week = new Date(year, month - 1, 1).getDay()
var rows = Math.ceil((dayofmonth[month - 1] + week) / 7);
var k = 0;
// 如果表格中有除表头外的数据,进行数据删除,避免上次月份的数据对下次有影响
var table = document.getElementById("tbcal");
while (table.rows.length > 1) {
table.deleteRow(1);
}
// 循环向表格中添加数据，生成日历
for (let i = 0; i < rows; i++) {
var lis = document.createElement('tr')
table.appendChild(lis)
for (let j = 0; j < 7; j++) {
var tds = document.createElement('td')
tds.className = 'box'
lis.appendChild(tds)
}
}
const data = [{
"Succ": 1,
"YYDateCount": [{
"leftYYCount": 175,
"yy_date": "2022-04-20"
}, {
"leftYYCount": 130,
"yy_date": "2022-04-21"
}, {
"leftYYCount": 175,
"yy_date": "2022-04-22"
}, {
"leftYYCount": 150,
"yy_date": "2022-04-25"
}, {
"leftYYCount": 175,
"yy_date": "2022-04-26"
}, {
"leftYYCount": 175,
"yy_date": "2022-04-27"
}, {
"leftYYCount": 130,
"yy_date": "2022-04-28"
}, {
"leftYYCount": 175,
"yy_date": "2022-04-29"
}, {
"leftYYCount": 150,
"yy_date": "2022-05-02"
}, {
"leftYYCount": 175,
"yy_date": "2022-05-03"
}, {
"leftYYCount": 175,
"yy_date": "2022-05-04"
}, {
"leftYYCount": 130,
"yy_date": "2022-05-05"
}, {
"leftYYCount": 175,
"yy_date": "2022-05-06"
}, {
"leftYYCount": 150,
"yy_date": "2022-05-09"
}, {
"leftYYCount": 175,
"yy_date": "2022-05-10"
}, {
"leftYYCount": 175,
"yy_date": "2022-05-11"
}],
"nextDate0TimeDiff": 25876793
}]
let trueMonth = month >= 10 ? (month) : ("0" + month)
for (let i = 1; i < dayofmonth[month - 1] + 1; i++) {
let ta = document.getElementsByClassName("box")[new Date(year, month - 1, 1).getDay() + i - 1]
ta.innerHTML = i
let trueDay = ta.innerHTML >= 10 ? ta.innerHTML : ("0" + ta.innerHTML)
let nowTime = `${year}-${trueMonth}-${trueDay}`
// console.log(nowTime)
let arr = JSON.parse(JSON.stringify(data))
for (let index = 0; index < arr[0].YYDateCount.length; index++) {
if (nowTime == arr[0].YYDateCount[index].yy_date) {
ta.style.color = "#666"
ta.addEventListener('click', function () {
console.log(this)
})
}
}
if (min !== '' && max !== '') {
for (let k = min; k < max; k++) {
let Time = new Date().getTime() + k * 24 * 60 * 60 * 1000
const monthTrue = month >= 10 ? month : (
"0" + month)
const dayTrue = new Date(Time).getDate() >= 10 ? new Date(Time).getDate() : ("0" + new Date(
Time).getDate())
let date = `${new Date(Time).getFullYear()}-${monthTrue}-${dayTrue}`
if (nowTime == date) {
ta.style.color = "#666"
ta.addEventListener('click', function () {
console.log(this)
})
}
}
}
}
}
function showMonth() {
let monthList = document.getElementById("monthshow")
for (let i = 0; i < 3; i++) {
let trs = document.createElement('ul')
monthList.appendChild(trs)
for (let j = 0; j < 4; j++) {
let tds = document.createElement('li')
tds.className = 'monthnum'
trs.appendChild(tds)
}
}
let chineseName = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"]
for (let i = 1; i <= 12; i++) {
let monthnum = document.getElementsByClassName("monthnum")[i - 1]
monthnum.innerHTML = chineseName[i - 1] + "月"
}
}
function showYear(yearLeftNum, yearRightNum) {
let yearShow = document.getElementsByClassName("year")[0].innerHTML
let monthList = document.getElementById("yearshow")
let yearLeft = document.getElementsByClassName("year")[1]
let yearRight = document.getElementsByClassName("year")[2]
if (yearLeftNum && yearRightNum) {
yearLeft.innerHTML = yearLeftNum
yearRight.innerHTML = yearRightNum
} else {
yearLeft.innerHTML = yearShow - 7
yearRight.innerHTML = yearShow - 0 + 7
}
for (let i = 0; i < 5; i++) {
let trs = document.createElement('ul')
monthList.appendChild(trs)
for (let j = 0; j < 3; j++) {
let tds = document.createElement('li')
tds.className = 'monthnum yearnum'
trs.appendChild(tds)
}
}
for (let i = 0; i < 15; i++) {
let monthnum = document.getElementsByClassName("yearnum")[i]
monthnum.innerHTML = yearLeft.innerHTML - 0 + i + '年'
}
}
function reduceLimitYear() {
let yearLeft = document.getElementsByClassName("year")[1]
let yearRight = document.getElementsByClassName("year")[2]
let yearshow = document.getElementById("yearshow")
yearshow.innerHTML = ''
let yearLeftNum = yearLeft.innerHTML - 0
let yearRightNum = yearRight.innerHTML - 0
yearLeftNum -= 15
yearRightNum -= 15
console.log(yearLeftNum)
showYear(yearLeftNum, yearRightNum)
}
function addLimitYear() {
let yearLeft = document.getElementsByClassName("year")[1]
let yearRight = document.getElementsByClassName("year")[2]
let yearshow = document.getElementById("yearshow")
yearshow.innerHTML = ''
let yearLeftNum = yearLeft.innerHTML - 0
let yearRightNum = yearRight.innerHTML - 0
yearLeftNum += 15
yearRightNum += 15
showYear(yearLeftNum, yearRightNum)
}
let init = new Date().getMonth()
let yearInit = new Date().getFullYear() - 1
function addMonth() {
init += 1
if (init == 13) {
init = 1
}
let month = document.getElementsByClassName("month")[0]
month.innerText = init
show()
}
function reduceMonth() {
init -= 1
if (init == 0) {
init = 12
}
let month = document.getElementsByClassName("month")[0]
month.innerText = init
show()
}
function addYear() {
yearInit += 1
let yearShow = document.getElementsByClassName("year")[0]
yearShow.innerText = yearInit
show()
}
function yearShow(){
let yearshow = document.getElementById("yearshow")
let headerlimit = document.getElementsByClassName("headerlimit")[0]
let tbcal = document.getElementById("tbcal")
let header = document.getElementsByClassName("header")[0]
tbcal.style.display = "none"
header.style.display = "none"
yearshow.style.display="block"
headerlimit.style.display="flex"
}
function reduceYear() {
yearInit -= 1
let yearShow = document.getElementsByClassName("year")[0]
yearShow.innerText = yearInit
show()
}
function monthShow() {
let headerHide = document.getElementsByClassName("month")[0]
let monthBtn = document.getElementsByClassName("month-btn")
let tbcal = document.getElementById("tbcal")
monthBtn[0].style.display = "none"
monthBtn[1].style.display = "none"
headerHide.style.display = "none"
tbcal.style.display = "none"
monthshow.style.display = "block"
}
</script>
</head>
<body>
<div id="div">
<!--定义年月菜单-->
<div class="case">
<!--定义列表-->
<div class="header dateline">
<div class="left">
<div class="year-btn" οnclick="reduceYear()"><<</div>
<div class="month-btn" οnclick="reduceMonth()"><</div>
</div>
<div class="center">
<div class="year" οnclick="yearShow()"></div> 年
<div class="month" οnclick="monthShow()"></div> 月
</div>
<div class="right">
<div class="month-btn" οnclick="addMonth()">></div>
<div class="year-btn" οnclick="addYear()">>></div>
</div>
</div>
<div class="headerlimit dateline">
<div class="left">
<div class="year-btn" οnclick="reduceLimitYear()"><<</div>
</div>
<div class="center">
<div class="year"></div> 年
<div style="margin: 0 5px;">-</div>
<div class="year"></div> 年
</div>
<div class="right">
<div class="year-btn" οnclick="addLimitYear()">>></div>
</div>
</div>
<table id="tbcal">
<thead>
<tr id="title">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
</table>
<div id="monthshow" class="monthshow">
</div>
<div id="yearshow" class="monthshow">
</div>
</div>
<div class="footer">
<div class="btn">
<span class="clear">清空</span>
<span class="sumbit">确认</span>
</div>
</div>
</div>
</body>
</html>
