当前位置：首页 > JavaScript

js实现月历

2026-04-07 05:13:37JavaScript

使用JavaScript实现月历

以下是基于原生JavaScript实现月历的完整代码示例，包含动态生成月份、日期高亮及基础交互功能。

js实现月历

核心逻辑

// 获取当前年月
const currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();

// 渲染月历函数
function renderCalendar() {
  const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
  const daysContainer = document.getElementById('days');
  const monthYearDisplay = document.getElementById('month-year');

  // 设置月份标题
  monthYearDisplay.textContent = `${monthNames[currentMonth]} ${currentYear}`;

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

  // 计算需要显示的日期范围（包括上个月和下个月的部分日期）
  const prevLastDay = new Date(currentYear, currentMonth, 0).getDate();
  const firstDayIndex = firstDay.getDay();
  const lastDayIndex = lastDay.getDay();
  const nextDays = 7 - lastDayIndex - 1;

  let days = "";

  // 添加上个月末尾日期
  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
  }

  // 添加当月日期
  for (let i = 1; i <= lastDay.getDate(); i++) {
    // 高亮当天
    if (i === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
      days += `<div class="today">${i}</div>`;
    } else {
      days += `<div>${i}</div>`;
    }
  }

  // 添加下个月开头日期
  for (let j = 1; j <= nextDays; j++) {
    days += `<div class="next-date">${j}</div>`;
  }

  daysContainer.innerHTML = days;
}

HTML结构

<div class="calendar">
  <div class="header">
    <button id="prev">‹</button>
    <h2 id="month-year"></h2>
    <button id="next">›</button>
  </div>
  <div class="weekdays">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
  </div>
  <div class="days" id="days"></div>
</div>

CSS样式

.calendar {
  width: 300px;
  font-family: Arial;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.days div {
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

.today {
  background: #4285f4;
  color: white;
  border-radius: 50%;
}

.prev-date, .next-date {
  color: #aaa;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}

初始化与事件绑定

// 初始化月历
renderCalendar();

// 绑定月份切换事件
document.getElementById('prev').addEventListener('click', () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
});

document.getElementById('next').addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
});