js制作月历且显示前后月份日期

在JavaScript中创建一个动态月历并显示前后月份的日期，通常会结合HTML、CSS和JavaScript来实现。以下是一个简单的步骤示例：

1. HTML部分：

<div id="calendar"></div>

这将创建一个容器用于显示日历。

2. CSS部分：
你可以设置样式来美化日历，例如添加背景颜色、边框等，这里给出基本样式的例子：

#calendar {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
}
.day {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
}

3. JavaScript部分：

function createCalendar(month, year) {
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  let calendarHTML = '<table>';

  // 添加表头
  calendarHTML += `<tr><th colspan="${daysInMonth > 31 ? 7 : daysInMonth}">周</th>`;
  for (let i = 1; i <= 31; i++) {
    if (i < 10) {
      calendarHTML += `<th>0${i}</th>`;
    } else {
      calendarHTML += `<th>${i}</th>`;
    }
  }
  calendarHTML += '</tr>';

  // 添加月份标题
  calendarHTML += `<tr><td class="month">${months[month]}</td></tr>`;

  // 添加日期
  for (let day = 1; day <= daysInMonth; day++) {
    const dateClass = (day === today.getDate() && month === today.getMonth()) ? 'today' : '';
    calendarHTML += `<tr><td class="${dateClass}" data-date="${day}">${day}</td></tr>`;
  }

  // 显示前后月份
  const prevMonth = month - 1 < 0 ? 11 : month - 1;
  const nextMonth = month + 1 > 11 ? 0 : month + 1;
  calendarHTML += `...<a href="#" onclick="prevMonth(${prevMonth}, ${year})">上月</a> | <a href="#" onclick="nextMonth(${nextMonth}, ${year})">下月</a>...</table>`;
  
  document.getElementById('calendar').innerHTML = calendarHTML;

  // 初始化当前日期
  today();
}

// 预设函数，可以获取当前日期
function today() {
  const now = new Date();
  const currentMonth = now.getMonth();
  const currentYear = now.getFullYear();

  createCalendar(currentMonth, currentYear);
}

// 定义前/后月点击事件
function prevMonth(month, year) {
  createCalendar(month, year);
}

function nextMonth(month, year) {
  createCalendar(month, year);
}

// 初始加载当前日期
today();

这个示例假设`months`是一个包含所有月份名称的对象，`today()`函数用于获取当前日期，`prevMonth()`和`nextMonth()`函数分别处理上个月和下个月的切换。你需要根据实际需求调整样式和功能。