无需理解，“开袋即食”，打开就是一个日历的样式以及功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Js日历</title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .date { width: 59vh; height: 59vh; margin: 0 auto; background-color: rgb(37, 76, 93); border: 1px solid rgb(5, 216, 226); } .evrday, .blockday { width: 13%; height: 7.5vh; margin: 0.1vh; background-color: white; } .evrday p,.evrday span{ font-size: 14px; line-height: 1.2; } .evrday:hover { background-color: rgb(22, 155, 213); color: white !important; } .blockday { opacity: 0; } .month { width: 100%; height: 3vh; padding: 0 1vh; display: flex; align-items: center; } .week { width: 100%; display: flex; justify-content: center; align-items: center; color: white; } .weekday { width: 14%; height: 3vh; display: flex; justify-content: center; align-items: center; } .weekday p{ font-size: 14px; } #calendar { width: 100%; height: 59vh; margin: auto; text-align: center; } #month { width: 100%; float: left; color: white; font-size: 16px; font-weight: bold; } #day { width: 100%; height: 53vh; padding: 1vh; justify-content: space-around; display: flex; flex-wrap: wrap; } </style> </head> <script src="js/jquery-3.7.0.js"></script> <body> <div class="date"> <div id="calendar"> <div class="month"> <div onclick="previous()"> <svg t="1693903662097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4363" width="3vh" height="3vh"> <path d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z" p-id="4364" fill="#ffffff"> </path> <path d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z" p-id="4365" fill="#ffffff"> </path> </svg> </div> <div id="month"></div> <div onclick="next()"> <svg t="1693914600013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4143" width="3vh" height="3vh"> <path d="M658.56 557.392L322.536 221.384l45.248-45.256 336.016 336.008z" p-id="4144" fill="#ffffff"> </path> <path d="M704.088 512.2L364.12 852.16l-45.256-45.248 339.976-339.976z" p-id="4145" fill="#ffffff"> </path> </svg> </div> </div> <div class="week"> <div class="weekday" style="color: red;"> <p>日</p> </div> <div class="weekday"> <p>一</p> </div> <div class="weekday"> <p>二</p> </div> <div class="weekday"> <p>三</p> </div> <div class="weekday"> <p>四</p> </div> <div class="weekday"> <p>五</p> </div> <div class="weekday" style="color: red;"> <p>六</p> </div> </div> <div id="day" style="color:#000"></div> </div> </div> <script> let today = new Date(); //获取当前时间 let year = today.getFullYear(); //获取当前的年份 let month = today.getMonth() + 1; //获取当前月 let day = today.getDate(); //获取当前日 let allday = 0; showday() function showmonth() { let year_month = year + '年' + month + '月'; $('#month').html(year_month); //显示当前的年月日 } function count() { if (month != 2) { if (month == 4 || month == 6 || month == 9 || month == 11) //判断是否是相同天数的几个月，二月除外 allday = 30; else allday = 31; } else { if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) //判断是否是闰年，进行相应的改变 allday = 29; else allday = 28; } } //显示相应月份的天数 function showday() { showmonth() count(); let fistdate = new Date(year, month - 1, 1); let xingqi = fistdate.getDay(); let str = ''; for (let i = 0; i < xingqi; i++) //循环输出天数 { str += `<div class="blockday"></div>` } for (let j = 1; j <= allday; j++) { if (year === today.getFullYear() && month === today.getMonth() + 1 && j === today.getDate()) { str += `<div class="evrday" style="background-color: rgb(221,153,31); color: white"> <span>${j}</span> </div>` continue; } if ((j + xingqi - 1) % 7 === 0 || (j + xingqi) % 7 === 0) { str += `<div class="evrday" style="color: red;"> <span>${j}</span> </div>` continue; } str += `<div class="evrday"> <span>${j}</span> </div>` } for (let k = 0; k < 42 - allday - xingqi; k++) { str += `<div class="blockday"></div>` } $('#day').html(str); } //点击下个月 function next() { if (month < 12) { month = month + 1; } else { month = 1; year = year + 1; } showday() } //点击上个月 function previous() { if (month > 1) { month = month - 1; } else { month = 12; year = year - 1; } showday() } </script> </body> </html>
