html日历js代码

HTML结构

<div id="calendar-container">
  <div class="calendar-header">
    <button id="prev-month">&lt;</button>
    <h2 id="month-year"></h2>
    <button id="next-month">&gt;</button>
  </div>
  <table id="calendar-table">
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

CSS样式

#calendar-container {
  width: 300px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
#month-year {
  flex-grow: 1;
  text-align: center;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  width: 14.28%;
  height: 40px;
  text-align: center;
  border: 1px solid #ddd;
}
.current-date {
  background-color: #ffeb3b;
}
.disabled {
  color: #ccc;
  pointer-events: none;
}

JavaScript逻辑

document.addEventListener('DOMContentLoaded', function() {
  const calendarTable = document.getElementById('calendar-table').tbody;
  const monthYearElem = document.getElementById('month-year');
  const prevMonthBtn = document.getElementById('prev-month');
  const nextMonthBtn = document.getElementById('next-month');
  let currentDate = new Date();
  let selectedDate = currentDate;
  // 渲染日历函数
  function renderCalendar(date) {
    // 设置显示的年月
    const year = date.getFullYear();
    const month = date.getMonth(); // 0-11
    monthYearElem.textContent = `${year}年${month+1}月`;
    // 获取当月第一天和最后一天
    const firstDay = new Date(year, month, 1).getDay(); // 0-6（周日-周六）
    const lastDate = new Date(year, month+1, 0).getDate(); // 当月总天数
    // 清空表格
    calendarTable.innerHTML = '';
    // 生成空白单元格（前导空格）
    for(let i=0; i<firstDay; i++) {
      const cell = document.createElement('td');
      cell.classList.add('disabled');
      calendarTable.appendChild(cell);
    }
    // 生成日期单元格
    for(let d=1; d<=lastDate; d++) {
      const cell = document.createElement('td');
      cell.textContent = d;
      // 标记当前日期
      if(d === currentDate.getDate() && month === currentDate.getMonth() && year === currentDate.getFullYear()) {
        cell.classList.add('current-date');
      }
      // 添加点击事件（可选）
      cell.addEventListener('click', () => {
        selectedDate = new Date(year, month, d);
        alert(`选择的日期是：${selectedDate.toLocaleDateString()}`);
      });
      calendarTable.appendChild(cell);
    }
    // 补充周末空白（如果需要）
    const totalCells = calendarTable.children.length;
    while(totalCells % 7 !== 0) {
      const cell = document.createElement('td');
      cell.classList.add('disabled');
      calendarTable.appendChild(cell);
    }
  }
  // 绑定月份切换按钮
  prevMonthBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() 1);
    renderCalendar(currentDate);
  });
  nextMonthBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
  });
  // 初始化日历
  renderCalendar(currentDate);
});

功能说明表

相关问题与解答

Q1：如何修改代码实现周起始为星期一？
A1：需要调整两个地方：

1. 修改表头顺序,将”日”移到最后：

   <th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th>

2. 修改getDay()返回值映射：原逻辑中getDay()返回0代表周日，调整后需要将周日放在最后，计算前导空格时改为：

   const firstDay = (date.getDay() + 6) % 7; // 将周日(0)转换为6，周一(1)保持1，依此类推

Q2：如何添加节假日标记功能？
A2：可以扩展日期单元格的生成逻辑：

1. 创建节假日数据对象：

   const holidays = {
     '1-1': '元旦',
     '10-1': '国庆'
   }; // 格式：MM-DD

2. 在生成日期时检查是否为节假日：

   const key = `${String(month+1).padStart(2)}-${String(d).padStart(2)}`;
   if(holidays[key]) {
     cell.classList.add('holiday'); // 添加自定义样式
     cell.title = holidays[key]; // 鼠标悬停提示
   }

3. 添加对应CSS样式：

   .holiday {
     background-color: #ff9800;
     border-radius: 50%;
   }