js h5实现动态日历

实现动态日历的基本思路

动态日历的核心是通过JavaScript动态生成日历表格，根据当前年月计算日期分布，并支持月份切换功能。HTML5提供更清晰的语义化结构，结合CSS实现样式美化。

HTML结构

创建一个基础的HTML结构，包含日历容器、月份导航和日期表格：

<div class="calendar">
  <div class="header">
    <button id="prev">上一月</button>
    <h2 id="month-year"></h2>
    <button id="next">下一月</button>
  </div>
  <table>
    <thead>
      <tr>
        <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
      </tr>
    </thead>
    <tbody id="days"></tbody>
  </table>
</div>

CSS样式

基础样式增强可视化效果：

.calendar {
  width: 350px;
  border: 1px solid #ddd;
  font-family: Arial;
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f5f5f5;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #eee;
}
th {
  background: #f0f0f0;
}
td.today {
  background: #ffff99;
}

JavaScript实现

核心逻辑包括日期计算和动态渲染：

document.addEventListener('DOMContentLoaded', function() {
  let currentDate = new Date();
  const monthYearElement = document.getElementById('month-year');
  const daysElement = document.getElementById('days');
  const prevBtn = document.getElementById('prev');
  const nextBtn = document.getElementById('next');

  function renderCalendar() {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    monthYearElement.textContent = `${year}年 ${month + 1}月`;

    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const today = new Date();

    let date = 1;
    let html = '';

    for (let i = 0; i < 6; i++) {
      html += '<tr>';

      for (let j = 0; j < 7; j++) {
        if (i === 0 && j < firstDay) {
          html += '<td></td>';
        } else if (date > daysInMonth) {
          html += '<td></td>';
        } else {
          const isToday = date === today.getDate() && 
                         month === today.getMonth() && 
                         year === today.getFullYear();
          html += `<td${isToday ? ' class="today"' : ''}>${date}</td>`;
          date++;
        }
      }

      html += '</tr>';
      if (date > daysInMonth) break;
    }

    daysElement.innerHTML = html;
  }

  prevBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
  });

  nextBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
  });

  renderCalendar();
});

功能扩展点

1. 日期点击事件：为每个日期单元格添加点击事件处理

   daysElement.addEventListener('click', (e) => {
   if (e.target.tagName === 'TD' && e.target.textContent) {
    console.log(`选中日期: ${currentDate.getFullYear()}-${currentDate.getMonth()+1}-${e.target.textContent}`);
   }
   });

2. 国际化支持：使用Intl.DateTimeFormat处理多语言月份显示

   monthYearElement.textContent = new Intl.DateTimeFormat('zh-CN', {
   year: 'numeric',
   month: 'long'
   }).format(currentDate);

3. 节日标记：通过日期匹配添加特殊样式

   
   const holidays = {
   '1-1': '元旦',
   '5-1': '劳动节'
   };

// 在渲染循环中添加判断 if (holidays[${month+1}-${date}]) { html += <td class="holiday">${date}<br>${holidays[${month+1}-${date}]}</td>; }

### 响应式设计建议

通过媒体查询适配移动设备：
```css
@media (max-width: 500px) {
  .calendar {
    width: 100%;
  }
  th, td {
    padding: 5px;
  }
}

完整实现需要考虑边界情况（如跨年月份切换）、性能优化（避免频繁DOM操作）和可访问性（ARIA标签）等因素。