用 new Date() 和循环拼 DOM 可快速生成可交互 HTML 日历：先算当月1号星期几和总天数，补上下月/上月占位；为每个添加 data-date 属性；用事件委托监听父容器点击；IE11 需拆分日期字符串传参；推荐 CSS Grid 布局。
怎么用 JavaScript 快速生成一个可交互的 HTML 日历
直接用 new Date() 和循环拼 DOM 就行，不需要框架或第三方库。核心是算出当月 1 号是周几、当月总天数，再补全上月/下月占位日期。
- 先用
getDay()得到当月 1 号是星期几（0=周日），往前补getDay()天的上月日期 - 用
getDate()配合setDate(0)拿上月最后一天，就能推当月总天数 - 渲染时给每个
<td> 加 <code>data-date属性，比如data-date="2024-04-15"，后续点击取值不依赖文本内容 - 别用
innerHTML +=拼接整个月——重排重绘开销大，建议建好字符串再一次性写入innerHTML - 把字符串用
split('-')拆开，转成数字后调用new Date(year, monthIndex, day) - 注意：
monthIndex是从 0 开始的，'2024-04-01'要传new Date(2024, 3, 1)，不是4 - 如果只是显示当月日历，其实可以绕过解析字符串——用当前时间戳加减毫秒来切月份，比字符串解析更稳
- 用
grid-column-start控制第一天从第几列开始（比如周一是第 2 列，就给第一个日期设grid-column: 2） - 避免用
float或inline-block模拟表格——换行和对齐在不同字体下容易偏移 - 移动端小屏下，别强行保持 7 列，可用
@media改成 4 列（周一至周四），否则字太挤、点击区域太小
点击日期没反应？检查事件委托是否漏了动态元素
日历格子是 JS 动态生成的，直接在 <td> 上绑 <code>onclick 会失效。必须用事件委托，监听父容器（比如 <table> 或外层 <code><div>）。
<ul><li>监听父元素的 <code>click 事件，用 event.target 判断是否点在带 data-date 的 <td> 上
<li>别写成 <code>document.querySelector('td').onclick = ... —— 这只会绑定第一个静态存在的 <td>，后续生成的无效
<li>如果用了 <code>addEventListener，注意别重复绑定，尤其在切换月份时没清理旧监听器，会导致同个日期触发多次
IE11 下 new Date('2024-04-01') 报错怎么办
IE11 不支持 ISO 格式字符串（如 '2024-04-01'）直接构造日期，会返回 Invalid Date。必须拆成年、月、日参数传入。
样式错乱、格子宽度不一致？优先用 CSS Grid 控制布局
用 <table> 做日历容易被默认样式干扰（比如边框合并、单元格间距），且响应式难调。CSS Grid 更可控。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>给容器设 <code>display: grid，列定义用 grid-template-columns: repeat(7, 1fr)
最常被忽略的是日期范围边界处理：跨年切月时，getMonth() 返回 -1 或 12 就得手动归零并更新年份；还有农历/节假日叠加需求时，数据源和 DOM 更新时机稍不一致，就会出现“点了 4 月 30 日却高亮了 5 月 1 日”的情况。
