js h5实现动态日历

实现动态日历的步骤

使用HTML5和JavaScript实现动态日历需要结合DOM操作和日期处理功能。以下是具体实现方法：

创建基础HTML结构

<div id="calendar">
  <div class="header">
    <button id="prev">上个月</button>
    <h2 id="month-year"></h2>
    <button id="next">下个月</button>
  </div>
  <div class="days">
    <div class="day-name">日</div>
    <div class="day-name">一</div>
    <div class="day-name">二</div>
    <div class="day-name">三</div>
    <div class="day-name">四</div>
    <div class="day-name">五</div>
    <div class="day-name">六</div>
  </div>
  <div id="dates" class="dates"></div>
</div>

添加CSS样式

#calendar {
  width: 300px;
  font-family: Arial, sans-serif;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.dates div {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.dates div:hover {
  background-color: #eee;
}
.day-name {
  font-weight: bold;
  padding: 10px;
}

JavaScript实现动态逻辑

document.addEventListener('DOMContentLoaded', function() {
  let currentDate = new Date();
  let currentMonth = currentDate.getMonth();
  let currentYear = currentDate.getFullYear();

  const monthYearElement = document.getElementById('month-year');
  const datesElement = document.getElementById('dates');
  const prevButton = document.getElementById('prev');
  const nextButton = document.getElementById('next');

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

    datesElement.innerHTML = '';

    // 填充空白日期
    for (let i = 0; i < firstDay; i++) {
      const emptyDiv = document.createElement('div');
      datesElement.appendChild(emptyDiv);
    }

    // 填充日期
    for (let day = 1; day <= daysInMonth; day++) {
      const dateDiv = document.createElement('div');
      dateDiv.textContent = day;

      // 标记当前日期
      if (day === currentDate.getDate() && 
          month === currentDate.getMonth() && 
          year === currentDate.getFullYear()) {
        dateDiv.classList.add('today');
      }

      datesElement.appendChild(dateDiv);
    }

    // 更新月份和年份显示
    const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', 
                       '七月', '八月', '九月', '十月', '十一月', '十二月'];
    monthYearElement.textContent = `${monthNames[month]} ${year}`;
  }

  // 按钮事件
  prevButton.addEventListener('click', function() {
    currentMonth--;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    renderCalendar(currentMonth, currentYear);
  });

  nextButton.addEventListener('click', function() {
    currentMonth++;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    renderCalendar(currentMonth, currentYear);
  });

  // 初始化日历
  renderCalendar(currentMonth, currentYear);
});

功能扩展建议

1. 添加事件功能：为日期单元格添加点击事件，实现日程管理功能
2. 高亮周末：通过CSS为周六和周日添加特殊样式
3. 本地存储：使用localStorage保存用户添加的事件
4. 响应式设计：通过媒体查询使日历适配不同屏幕尺寸
5. 动画效果：添加月份切换时的过渡动画

注意事项

1. 日期计算时注意月份从0开始（0=一月，11=十二月）
2. getDay()返回星期几（0=周日，6=周六）
3. 跨年切换时需要同时调整月份和年份
4. 性能优化：避免频繁的DOM操作，可以使用文档片段(documentFragment)