js h5实现动态日历

实现动态日历的基本思路

动态日历通常需要展示当前月份的日期，并允许用户切换月份或年份。使用JavaScript和HTML5可以轻松实现这一功能。

HTML结构

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

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

CSS样式

为日历添加基本样式，使其更美观。

.calendar {
  width: 300px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  background: #eee;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 5px;
}

.days div {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.days div:hover {
  background: #f0f0f0;
}

.days .prev-month,
.days .next-month {
  color: #aaa;
}

JavaScript逻辑

编写JavaScript代码来动态生成日历，并处理月份切换。

document.addEventListener('DOMContentLoaded', function() {
  const monthYearElement = document.getElementById('month-year');
  const daysElement = document.getElementById('days');
  const prevButton = document.getElementById('prev');
  const nextButton = document.getElementById('next');

  let currentDate = new Date();
  let currentMonth = currentDate.getMonth();
  let currentYear = currentDate.getFullYear();

  function renderCalendar() {
    const firstDay = new Date(currentYear, currentMonth, 1);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay();

    monthYearElement.textContent = `${currentYear}年 ${currentMonth + 1}月`;

    daysElement.innerHTML = '';

    for (let i = 0; i < startingDay; i++) {
      const dayElement = document.createElement('div');
      dayElement.classList.add('prev-month');
      const prevMonthLastDay = new Date(currentYear, currentMonth, 0).getDate();
      dayElement.textContent = prevMonthLastDay - startingDay + i + 1;
      daysElement.appendChild(dayElement);
    }

    for (let i = 1; i <= daysInMonth; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;
      if (i === currentDate.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear()) {
        dayElement.classList.add('today');
      }
      daysElement.appendChild(dayElement);
    }

    const totalDays = startingDay + daysInMonth;
    const remainingCells = 42 - totalDays;

    for (let i = 1; i <= remainingCells; i++) {
      const dayElement = document.createElement('div');
      dayElement.classList.add('next-month');
      dayElement.textContent = i;
      daysElement.appendChild(dayElement);
    }
  }

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

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

  renderCalendar();
});

功能扩展

可以添加更多功能，如点击日期事件、标记特定日期或添加日程管理。

daysElement.addEventListener('click', function(e) {
  if (e.target.tagName === 'DIV' && !e.target.classList.contains('prev-month') && !e.target.classList.contains('next-month')) {
    alert(`你选择了 ${currentYear}年 ${currentMonth + 1}月 ${e.target.textContent}日`);
  }
});

响应式设计

为适应不同屏幕尺寸，可以添加媒体查询。

@media (max-width: 400px) {
  .calendar {
    width: 100%;
  }
}

通过以上步骤，可以实现一个基本的动态日历，用户可以通过按钮切换月份，日历会动态更新显示当前月份的日期布局。