初学前端花了一下午写了一个简单的日历效果：
可以选择按月或者按年切换，当前日期会有绿色的背景显示， 所有的日期都会正确的对应星期几。
所有代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>简单日历效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {display: flex;flex-direction: row;}li {display: block;list-style: none;}body {background-color: rgb(236, 195, 202);}.cal-container .year-month>div:first-child>span,.cal-container .year-month .pre,.cal-container .year-month .next,.cal-container .weeks>ul>li,.cal-container .days>ul .style-default {cursor: pointer;}.cal-container .year-month .pre:hover,.cal-container .year-month .next:hover,.cal-container .weeks>ul>li:hover {text-shadow: 2px 2px 2px rgb(121, 121, 121);}.cal-container {display: flex;flex-direction: column;position: absolute;top: 20%;left: 50%;width: 600px;margin-left: -300px;box-shadow: 7px 7px 7px rgb(112, 112, 112);background-color: aquamarine;}.cal-container .year-month {position: relative;width: 100%;height: 250px;background-color: rgb(107, 215, 168);}.cal-container .year-month>div:first-child {display: flex;flex-direction: column;position: absolute;top: 50%;left: 50%;width: 200px;height: 70px;transform: translate(-50%, -50%);text-align: center;letter-spacing: 3px;}.cal-container .year-month>div:first-child>span {display: block;margin-bottom: 5px;font-weight: 700;color: white; }.cal-container .year-month>div:first-child>span:first-child {font-size: 40px;}.cal-container .year-month>div:first-child>span:last-child {font-size: 25px;}.cal-container .year-month .pre,.cal-container .year-month .next {position: absolute;top: 50%;height: 40px;transform: translateY(-20px);margin: 0 20px;font-size: 40px;color: white;}.cal-container .year-month .next {right: 0;}.cal-container .weeks>ul,.cal-container .days>ul {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;padding: 0 2.5px;background-color: rgb(202, 202, 202);}.cal-container .days>ul {padding: 20px 0;background-color: rgb(225, 225, 225);}.cal-container .weeks>ul>li {width: 85px;font-size: 20px;font-weight: 700;color: rgb(75, 75, 75);text-align: center;line-height: 50px;}.style-default {width: 50px;height: 50px;margin: 0 17.5px;font-size: 20px;font-weight: 700;color: rgb(75, 75, 75);text-align: center;line-height: 50px;}.days>ul .style-default:hover {background-color: rgb(202, 202, 202);}.cal-container .days>ul .bg-style {background-color: rgb(107, 215, 168);}.no-style {width: 50px;height: 50px;margin: 0 17.5px;}</style></head><body><div class="cal-container"><div class="year-month"><div><span id="month"></span><span id="year"></span></div><div class="pre" id="pre-month"><</div><div class="next" id="next-month">></div></div><div class="weeks"><ul><li>Mon</li><li>Tue</li><li>Wed</li><li>Thu</li><li>Fri</li><li>Sat</li><li>Sun</li></ul></div><div class="days"><ul id="day"></ul></div></div><script>// 获取年月日和星期几let date = new Date();Y = date.getFullYear();M = date.getMonth();W = date.getDay();D = date.getDate();isSelect = true; //true为选择了月，false为选择了年（添加文本阴影）// 更新当前年let yearNow = document.getElementById("year");yearNow.innerHTML = Y;// 更新当前月let monthNow = document.getElementById("month");monthNow.innerHTML = monthAndMaxDay(Y, M)[0];// 判断选中年还是月（添加文本阴影）selected(isSelect);//更新当前日let days = document.getElementById("day");updateAllDays(Y, M);// 选择按月切换还是按年切换yearNow.addEventListener("click", function() { isSelect = falseselected(isSelect); });monthNow.addEventListener("click", function() { isSelect = true;selected(isSelect); });// 左右切换日期let previous = document.getElementById("pre-month");previous.addEventListener("click", function() { changePage(true); });let next = document.getElementById("next-month");next.addEventListener("click", function() { changePage(false); });// 按日查询对应的星期几function dayToStar(year, month, day) {let theDate = new Date(year, month, day);return theDate.getDay();}// 查询一个月对应的英文命名和最大天数function monthAndMaxDay(year, month) {let month_now = "";let maxDay = 0;// 一个月的最大天数switch(month+1) {case 1: month_now = "一月"; maxDay = 31; break;case 2: month_now = "二月";if(year % 4 == 0) {maxDay = 29;} else {maxDay = 28;}break;case 3: month_now = "三月"; maxDay = 31; break;case 4: month_now = "四月"; maxDay = 30; break;case 5: month_now = "五月"; maxDay = 31; break;case 6: month_now = "六月"; maxDay = 30; break;case 7: month_now = "七月"; maxDay = 31; break;case 8: month_now = "八月"; maxDay = 31; break;case 9: month_now = "九月"; maxDay = 30; break;case 10: month_now = "十月"; maxDay = 31; break;case 11: month_now = "十一月"; maxDay = 30; break;case 12: month_now = "十二月"; maxDay = 31; break;default: month = "";}return [month_now, maxDay];}// 更新当前月的所有天数function updateAllDays(year, month) {let offset = dayToStar(year, month, 1);let maxDay = monthAndMaxDay(year, month)[1];// 实现日期和星期对应for(let i=0; i<offset; i++) {let day = document.createElement("li");day.className = "no-style";days.appendChild(day);}for(let i=1; i<=maxDay; i++) {let day = document.createElement("li");let dateNow = new Date();// 当前日期有绿色背景if(year == dateNow.getFullYear() && month == dateNow.getMonth() && i == dateNow.getDate()) {day.className = "style-default bg-style"} else {day.className = "style-default";}day.id = i;day.innerText = idays.appendChild(day);}}// 选择按月切换还是按年切换function selected(boolean) {if(boolean) {monthNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";yearNow.style.textShadow = "none";} else {monthNow.style.textShadow = "none";yearNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";}}// 点击切换事件function changePage(boolean) {// 按年切换还是按月切换if(isSelect) {// 向前切换还是向后切换if(boolean) {M = M-1;if(M == -1) {Y--;M = 11;}} else {M = M+1;if(M == 11) {Y++;M = 0;}}} else {if(boolean) {Y--;} else {Y++;}}yearNow.innerHTML = Y;monthNow.innerHTML = monthAndMaxDay(Y, M)[0];// 清空一个月所有天数days.innerHTML = "";// 重新添加一个月所有天数updateAllDays(Y, M);}</script></body></html>
