原生js实现日历效果

原生js实现日历效果

实现日历效果，需要完成以下几个步骤：

• 获取年月数据
• 绘制日历框架
• 填充日期数据
• 绑定事件

1. 获取年月数据

通过Date()获取当前时间信息，包括年、月、日等信息。

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

2. 绘制日历框架

通过HTML元素绘制出日历框架，包括日历头和日期框架。

const calendarWrapper = document.querySelector('.calendar-wrapper'); // 获取容器元素
const calendarHTML = `
  <div class="calendar-header">
    <span class="prev-year-btn">&lt;&lt;</span>
    <span class="prev-month-btn">&lt;</span>
    <span class="calendar-title">${currentYear}年${currentMonth}月</span>
    <span class="next-month-btn">&gt;</span>
    <span class="next-year-btn">&gt;&gt;</span>
  </div>
  <ul class="calendar-content"></ul>
`;
calendarWrapper.innerHTML = calendarHTML;  // 将html代码写入容器元素中

3. 填充日期数据

获取当前月份的第一天，以及当前月份的总天数。

const firstDay = new Date(currentYear, currentMonth - 1, 1).getDay();
const totalDays = new Date(currentYear, currentMonth, 0).getDate();

根据firstDay，在日历框架中绘制出相应数量的空白日期占位符。

let contentHTML = '';
for (let i = 0; i < firstDay; i++) {
  contentHTML += '<li class="calendar-item"></li>';
}

根据totalDays，绘制出当前月份的日期信息。

for (let i = 1; i <= totalDays; i++) {
  contentHTML += `
    <li class="calendar-item">${i}</li>
  `;
}

将绘制好的日期填充到日历框架中。

const calendarContent = calendarWrapper.querySelector('.calendar-content');
calendarContent.innerHTML = contentHTML;

4. 绑定事件

为日历头的翻页按钮绑定点击事件，通过更新currentYear、currentMonth并重新绘制出日历框架来完成月份的翻页功能。

const prevYearBtn = calendarWrapper.querySelector('.prev-year-btn');
const prevMonthBtn = calendarWrapper.querySelector('.prev-month-btn');
const nextMonthBtn = calendarWrapper.querySelector('.next-month-btn');
const nextYearBtn = calendarWrapper.querySelector('.next-year-btn');

prevMonthBtn.addEventListener('click', () => {
  currentMonth--;
  if (currentMonth <= 0) {
    currentMonth = 12;
    currentYear--;
  }
  renderCalendar();
});

nextMonthBtn.addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 12) {
    currentMonth = 1;
    currentYear++;
  }
  renderCalendar();
});

prevYearBtn.addEventListener('click', () => {
  currentYear--;
  renderCalendar();
});

nextYearBtn.addEventListener('click', () => {
  currentYear++;
  renderCalendar();
});

完整代码示例：https://codepen.io/zjazj/pen/XVJwQj

另外，还可以通过moment.js库来优化日期时间处理：https://momentjs.com/

示例2：https://codepen.io/robin-dai/pen/LLdJJa

以上两个示例都使用了原生js实现日历效果，前者是通过HTML+CSS+JS方式实现，后者是通过js渲染日历框架和填充数据的方式实现。其中，第一个示例更注重外观和样式，第二个示例更注重代码逻辑和灵活性。