js实现简单日历效果

实现一个简单日历效果的方式有很多种，我这里介绍一种使用原生JavaScript实现的方法。

步骤一：HTML结构

首先，在HTML中创建一个包含日历的div，结构如下：

<div id="calendar">
  <div class="header">
    <span class="left" id="prevMonth">&#10094;</span>
    <span class="month-year" id="monthYear"></span>
    <span class="right" id="nextMonth">&#10095;</span>
  </div>
  <div class="weekdays">
    <span>Sun</span>
    <span>Mon</span>
    <span>Tue</span>
    <span>Wed</span>
    <span>Thu</span>
    <span>Fri</span>
    <span>Sat</span>
  </div>
  <div class="days" id="days"></div>
</div>

步骤二：CSS样式

为了让日历看起来更加好看，我们需要添加一些CSS样式：

#calendar {
  width: 240px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  font-size: 16px;
  text-align: center;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-weight: bold;
}

.weekdays {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  background-color: #eee;
}

.weekdays span {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

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

步骤三：JavaScript代码

接下来，在JavaScript中编写代码来生成日历：

const calendarDays = document.getElementById('days');
const calendarMonthYear = document.getElementById('monthYear');
const prevMonthBtn = document.getElementById('prevMonth');
const nextMonthBtn = document.getElementById('nextMonth');

let currentDate = new Date();

prevMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  updateCalendar();
});

nextMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  updateCalendar();
});

function updateCalendar() {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const firstDayOfMonth = new Date(year, month, 1).getDay();
  const lastDayOfMonth = new Date(year, month, daysInMonth).getDay();

  let day = 1;

  let calendarDaysHTML = ``;

  for (let i = 0; i < 6; i++) {
    let rowHTML = ``;

    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < firstDayOfMonth) {
        rowHTML += `<div class="day inactive"></div>`;
      } else if (day > daysInMonth) {
        rowHTML += `<div class="day inactive"></div>`;
      } else {
        rowHTML += `<div class="day active">${day}</div>`;
        day++;
      }
    }
    calendarDaysHTML += rowHTML;
  }

  calendarDays.innerHTML = calendarDaysHTML;
  calendarMonthYear.innerHTML = `${year}年${month + 1}月`;
}

updateCalendar();

我们在这个代码中做了如下的事情：

1. 获取HTML元素，例如日历的div、月份和日期显示的元素等。
2. 创建一个变量来存储当前日期，初始值为当天日期。
3. 添加事件监听器，当用户点击“上一个月”或“下一个月”按钮时，更新当前日期。
4. 定义一个函数来生成日历，函数会使用当前日期来计算这个月有多少天、这个月的第一天和最后一天是星期几等信息，并根据这些信息来生成日历表格。
5. 调用updateCalendar函数来生成日历表格，并将日历显示出来。

下面提供两个示例：

• 示例一：根据用户输入的年月来显示对应的日历

const yearInput = document.getElementById('yearInput');
const monthInput = document.getElementById('monthInput');
const showCalendarBtn = document.getElementById('showCalendarBtn');

showCalendarBtn.addEventListener('click', () => {
  const year = parseInt(yearInput.value);
  const month = parseInt(monthInput.value) - 1;

  if (isNaN(year) || isNaN(month)) {
    alert('请输入正确的年份和月份！');
    return;
  }

  currentDate = new Date(year, month, 1);
  updateCalendar();
});

这段代码会先获取用户输入的年份和月份，然后当用户点击“显示日历”按钮时，将当前日期设置为用户输入的年月的第一天，并调用updateCalendar函数来显示对应的日历。

• 示例二：为当前日期所处的月份增加一个标识

function updateCalendar() {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const firstDayOfMonth = new Date(year, month, 1).getDay();
  const lastDayOfMonth = new Date(year, month, daysInMonth).getDay();

  let day = 1;

  let calendarDaysHTML = ``;

  for (let i = 0; i < 6; i++) {
    let rowHTML = ``;

    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < firstDayOfMonth) {
        rowHTML += `<div class="day inactive"></div>`;
      } else if (day > daysInMonth) {
        rowHTML += `<div class="day inactive"></div>`;
      } else {
        const currentDateObj = new Date();

        if (year === currentDateObj.getFullYear() && month === currentDateObj.getMonth() && day === currentDateObj.getDate()) {
          rowHTML += `<div class="day active today">${day}</div>`;
        } else {
          rowHTML += `<div class="day active">${day}</div>`;
        }

        day++;
      }
    }
    calendarDaysHTML += rowHTML;
  }

  calendarDays.innerHTML = calendarDaysHTML;
  calendarMonthYear.innerHTML = `${year}年${month + 1}月`;
}

在这个示例中，我们创建了一个currentDateObj对象来表示当前日期，然后在生成日历的过程中，当某一天是当前日期所处的月份的一部分时，我们为这一天的div元素添加一个“today”类，从而给这个日期增加了一个标识。