js实现日期表格

使用JavaScript创建日期表格

在HTML中创建一个<table>元素，并为其设置一个ID以便JavaScript操作：

<table id="dateTable">
  <thead>
    <tr>
      <th>周日</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
      <th>周六</th>
    </tr>
  </thead>
  <tbody id="dateBody"></tbody>
</table>

编写JavaScript生成日期表格

定义生成日期表格的函数：

function generateDateTable(year, month) {
  const tableBody = document.getElementById('dateBody');
  tableBody.innerHTML = '';

  const firstDay = new Date(year, month - 1, 1);
  const lastDay = new Date(year, month, 0);
  const startDay = firstDay.getDay();
  const totalDays = lastDay.getDate();

  let date = 1;
  for (let i = 0; i < 6; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      const cell = document.createElement('td');

      if (i === 0 && j < startDay) {
        cell.textContent = '';
      } else if (date > totalDays) {
        cell.textContent = '';
      } else {
        cell.textContent = date;
        date++;
      }

      row.appendChild(cell);
    }

    tableBody.appendChild(row);
    if (date > totalDays) break;
  }
}

调用函数生成表格

指定年份和月份调用生成函数：

// 生成2023年10月的日历
generateDateTable(2023, 10);

添加样式美化表格

通过CSS为表格添加基本样式：

#dateTable {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

#dateTable th, #dateTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#dateTable th {
  background-color: #f2f2f2;
  font-weight: bold;
}

#dateTable td:hover {
  background-color: #f5f5f5;
}

动态生成当前月份表格

自动获取当前年月并生成表格：

const now = new Date();
generateDateTable(now.getFullYear(), now.getMonth() + 1);

添加月份导航功能

实现可以切换月份的导航按钮：

<div class="calendar-nav">
  <button id="prevMonth">上个月</button>
  <span id="currentMonth"></span>
  <button id="nextMonth">下个月</button>
</div>

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

function updateCalendar() {
  generateDateTable(currentYear, currentMonth);
  document.getElementById('currentMonth').textContent = 
    `${currentYear}年${currentMonth}月`;
}

document.getElementById('prevMonth').addEventListener('click', () => {
  currentMonth--;
  if (currentMonth < 1) {
    currentMonth = 12;
    currentYear--;
  }
  updateCalendar();
});

document.getElementById('nextMonth').addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 12) {
    currentMonth = 1;
    currentYear++;
  }
  updateCalendar();
});

updateCalendar();

高亮显示当天日期

修改生成函数以高亮当前日期：

function generateDateTable(year, month) {
  // ...之前的代码...

  const today = new Date();
  const isCurrentMonth = year === today.getFullYear() && month === today.getMonth() + 1;

  // 在生成日期的循环内添加：
  if (isCurrentMonth && date === today.getDate()) {
    cell.classList.add('today');
  }
}

添加CSS样式：

.today {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}