今天就来好好折腾一下日历是怎么写的。
首先，我们看看 windows 的日历。发现总共有这么几个元素。先实现试试。 1.年份的选择、月份的选择2.周一 ~ 周日(周日 ~ 周六)3.日历格子 6*7 = 42 从数据的角度来分析日历的实现是比较简单的 1.我们需要显示一个当前时间的结构 - new Date()2.我们需要显示当月的信息 - [星期(周一~周日)，日期(1-[28,29,30,31])] 其中我们只要知道了每个月的 1日 是星期几，就能很容易地摆放后面的日子(万事开头难)。我们最多需要 6 行来显示我们的日期，因为要考虑周一是星期日的情况 1+7*4 = 29(五行)显然是不够的确定了 6 行之后，我们发现我们可能需要获取上个月，和下个月多出来的几天的摆放位置。不同年份的不同月的 2月份，我们知道它的日期是不同的，所以我们还需要判断 平年还是闰年。3.显示上个月，下个月的切换。我们发现需要有个函数来帮我们更新日历。
这里我们就要考虑一下，到底要怎么更新这些 dom 里面的数据了，重新删除插入 dom 肯定是不太好的。
分析完之后，让我们跟着 新增/修改 一些代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><style> .week-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid sandybrown; text-align: center; } .date-item { display: inline-block; width: 80px; height: 40px; line-height: 40px; border: 1px solid beige; text-align: center; }</style></head><body> <div class="wrapper"> <div class="year-line"> <button id="preMonth" class="year-prev">上一月</button> <button id="nowYear" class="year-now"></button> <button id="nowMonth"></button> <button id="nowDate"></button> <button id="nextMonth" class="year-next">下一月</button> </div> <div id="weekLine" class="week-line"></div> <div id="dateWrap" class="date-wrap"></div> </div></body><script> // 工具方法 - start // 1.为了获得每个月的日期有多少，我们需要判断 平年闰年[四年一闰，百年不闰，四百年再闰] const isLeapYear = (year) => { return (year % 400 === 0)