js实现台历

实现台历的 JavaScript 方法

使用 JavaScript 实现台历可以通过动态生成日历表格、处理日期逻辑以及添加交互功能来完成。以下是具体实现步骤：

基础 HTML 结构

创建一个简单的 HTML 结构用于承载日历：

<div id="calendar">
  <div class="calendar-header">
    <button id="prev-month">上一月</button>
    <h2 id="current-month"></h2>
    <button id="next-month">下一月</button>
  </div>
  <table id="calendar-body">
    <thead>
      <tr>
        <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

JavaScript 核心逻辑

通过 JavaScript 动态生成日历内容并处理月份切换：

document.addEventListener('DOMContentLoaded', function() {
  let currentDate = new Date();
  const monthDisplay = document.getElementById('current-month');
  const calendarBody = document.querySelector('#calendar-body tbody');

  function renderCalendar(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    monthDisplay.textContent = `${year}年${month + 1}月`;

    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startingDay = firstDay.getDay();

    calendarBody.innerHTML = '';
    let dateNum = 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 < startingDay) {
          cell.textContent = '';
        } else if (dateNum > lastDay.getDate()) {
          break;
        } else {
          cell.textContent = dateNum;
          dateNum++;
        }
        row.appendChild(cell);
      }
      calendarBody.appendChild(row);
    }
  }

  document.getElementById('prev-month').addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
  });

  document.getElementById('next-month').addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
  });

  renderCalendar(currentDate);
});

样式增强

添加基本 CSS 样式提升视觉效果：

#calendar {
  width: 300px;
  font-family: Arial, sans-serif;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#calendar-body {
  width: 100%;
  border-collapse: collapse;
}
#calendar-body th, #calendar-body td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
#calendar-body th {
  background-color: #f2f2f2;
}

高级功能扩展

添加日期点击事件

calendarBody.addEventListener('click', function(e) {
  if (e.target.tagName === 'TD' && e.target.textContent) {
    alert(`选中日期: ${currentDate.getFullYear()}年${currentDate.getMonth()+1}月${e.target.textContent}日`);
  }
});

标记当前日期 在 renderCalendar 函数中添加：

const today = new Date();
if (year === today.getFullYear() && month === today.getMonth() && dateNum-1 === today.getDate()) {
  cell.classList.add('today');
}

配套 CSS:

.today {
  background-color: #ffeb3b;
  font-weight: bold;
}

响应式设计

通过媒体查询适配移动设备：

@media (max-width: 600px) {
  #calendar {
    width: 100%;
  }
  #calendar-body th, #calendar-body td {
    padding: 4px;
    font-size: 14px;
  }
}

完整实现方案

将上述代码片段组合后，即可实现一个功能完整的 JavaScript 台历，包含月份切换、日期显示、当前日期标记和点击交互等功能。可根据需要进一步扩展添加节假日标记、日程提醒等高级功能。