js使用表格生成一个日历，点击按钮上查看上个月，点击按钮下，查看下个月，月份，年份

本文链接：https://blog.csdn.net/m0_64590669/article/details/133692518

要使用JavaScript生成一个日历表格，并添加按钮来查看上一个月和下一个月，同时显示月份、年份以及每天对应的周数，并且只渲染有日期的行，可以按照以下步骤进行操作：

创建HTML结构：在HTML文件中创建一个包含表格、按钮和日期信息的容器元素。例如：

<div id="calendar">
  <div id="header">
    <button id="prevBtn">上个月</button>
    <span id="monthYear"></span>
    <button id="nextBtn">下个月</button>
  </div>
  <table id="calendarTable">
    <!-- 表格内容将通过JavaScript动态生成 -->
  </table>
</div>

2.编写JavaScript代码：在JavaScript文件中编写代码来生成日历表格、处理按钮点击事件以及计算每天对应的周数。首先，我们需要获取容器元素和按钮元素的引用，然后为按钮添加点击事件监听器。

// 获取容器元素和按钮元素的引用
const calendarContainer = document.getElementById('calendar');
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
const monthYear = document.getElementById('monthYear');

// 设置按钮的点击事件监听器
prevButton.addEventListener('click', showPrevMonth);
nextButton.addEventListener('click', showNextMonth);

// 定义当前日期变量
let currentDate = new Date();

// 显示当前月份的日历
showCalendar(currentDate);

function getWeekNumber(year, month, day) {
  const date = new Date(year, month, day);
  date.setHours(0, 0, 0);
  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
  const yearStart = new Date(date.getFullYear(), 0, 1);
  const weekNum = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
  return weekNum;
}

// 显示上一个月的日历
function showPrevMonth() {
  currentDate.setMonth(currentDate.getMonth() - 1);
  showCalendar(currentDate);
}

// 显示下一个月的日历
function showNextMonth() {
  currentDate.setMonth(currentDate.getMonth() + 1);
  showCalendar(currentDate);
}

// 生成日历表格
function showCalendar(date) {
  // 获取年份和月份
  const year = date.getFullYear();
  const month = date.getMonth();

  // 更新月份和年份显示
  monthYear.textContent = `${year}年${month + 1}月`;

  // 清空表格内容
  const calendarTable = document.getElementById('calendarTable');
  calendarTable.innerHTML = '';

  // 创建表头
  const headerRow = calendarTable.insertRow();
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  for (let i = 0; i < 7; i++) {
    const cell = headerRow.insertCell();
    cell.textContent = weekdays[i];
  }

  // 获取当月的第一天和最后一天
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);

  // 计算日期范围
  const start = firstDay.getDay();
  const end = lastDay.getDate();

  // 创建日期单元格
  let dateCount = 1;
  let weekCount = 1;
  let hasRenderedRows = false;
  for (let row = 0; row < 6; row++) {
    const calendarRow = calendarTable.insertRow();

    for (let col = 0; col < 7; col++) {
      const cell = calendarRow.insertCell();

      if ((row === 0 && col < start) || dateCount > end) {
        // 上个月或下个月的日期
        cell.classList.add('non-current-month');
      } else {
        // 当月的日期
        cell.textContent = dateCount++;
        const currentWeek = getWeekNumber(year, month, cell.textContent);
        cell.dataset.week = currentWeek;

        if (!hasRenderedRows) {
          hasRenderedRows = true;
        }
      }
    }
  }

  // 如果没有渲染任何日期行，则删除最后一行空白行
  if (!hasRenderedRows) {
   ```javascript
    calendarTable.deleteRow(6);
  }
}

3.样式美化：根据需要，可以使用CSS来为表格和按钮添加样式。例如：

#calendar {
  text-align: center;
}

#header {
  margin-bottom: 10px;
}

#prevBtn,
#nextBtn {
  padding: 5px 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

#monthYear {
  font-weight: bold;
  margin: 0 10px;
}

#calendarTable {
  border-collapse: collapse;
  margin: 0 auto;
}

#calendarTable td {
  padding: 5px;
  text-align: center;
}

.non-current-month {
  color: #ccc;
}

ps：根据自己需求添加样式。