一起学写js Calender日历控件

一起学写 JavaScript Calender 日历控件 - 完整攻略

本攻略将帮助你学习如何编写一个简单的 JavaScript 日历控件。我们将使用原生 JavaScript 实现该控件，这样可以更好地学习和理解 JavaScript 和 DOM 操作。

步骤 1：HTML 结构

我们需要一个 HTML 结构作为日历控件的基础。以下是一个基本的 HTML 结构，用于容纳日历控件：

<div id="calendar-wrapper">
  <div id="calendar-header">
    <button id="prev-month">&lt;</button>
    <h2 id="calendar-month">June 2021</h2>
    <button id="next-month">&gt;</button>
  </div>
  <table id="calendar-body">
    <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

上述 HTML 结构分为两个部分：头部和主体。头部包含控制按钮和月份名称，主体包含日历表格。日历表格是一个标准的 HTML 表格。

步骤 2：CSS 样式

我们需要添加一些 CSS 样式来让日历控件更好看。以下是一些基本的样式：

#calendar-wrapper {
  max-width: 500px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

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

#calendar-header button {
  background-color: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

#calendar-header h2 {
  margin: 0;
  font-size: 24px;
}

#calendar-body {
  width: 100%;
  border-collapse: collapse;
}

#calendar-body th,
#calendar-body td {
  text-align: center;
  padding: 10px;
}

#calendar-body th {
  color: #999;
}

这些 CSS 样式将使日历控件看起来更好，但样式可根据需要进行更改。

步骤 3：JavaScript 代码

现在我们需要编写 JavaScript 代码来完成日历控件的功能。以下是一些 JavaScript 代码示例，可能会帮助理解如何完成该功能。

首先，我们需要获取所有需要的 HTML 元素：

const calendarWrapper = document.getElementById("calendar-wrapper");
const prevMonthBtn = document.getElementById("prev-month");
const nextMonthBtn = document.getElementById("next-month");
const calendarMonth = document.getElementById("calendar-month");
const calendarBody = document.querySelector("#calendar-body tbody");

获取元素后，我们需要编写一些辅助函数来生成日期和填充日历表格。以下代码显示如何生成日期：

function getDaysInMonth(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

function getFirstDayOfMonth(year, month) {
  return new Date(year, month, 1).getDay();
}

function getLastDayOfMonth(year, month) {
  return new Date(year, month + 1, 0).getDay();
}

function generateMonthDates(year, month) {
  const daysInMonth = getDaysInMonth(year, month);
  const firstDay = getFirstDayOfMonth(year, month);
  const lastDay = getLastDayOfMonth(year, month);

  const beforeDays = firstDay === 0 ? 6 : firstDay - 1;
  const afterDays = lastDay === 0 ? 0 : 7 - lastDay;

  const dates = [];

  for (let i = beforeDays; i > 0; i--) {
    dates.push({ day: null, className: "before" });
  }

  for (let i = 1; i <= daysInMonth; i++) {
    dates.push({ day: i, className: null });
  }

  for (let i = 1; i <= afterDays; i++) {
    dates.push({ day: null, className: "after" });
  }

  return dates;
}

通过上述代码，我们可生成每个月的日期数组。

接下来，我们需要一个函数来填充日历表格。以下代码显示如何完成该函数：

function fillCalendar(dates) {
  calendarBody.innerHTML = "";
  const rows = [];

  for (let i = 0; i < dates.length; i += 7) {
    const weekDates = dates.slice(i, i + 7);
    const row = document.createElement("tr");
    weekDates.forEach((date) => {
      const cell = document.createElement("td");
      cell.textContent = date.day;
      cell.className = date.className;
      row.appendChild(cell);
    });
    rows.push(row);
  }

  rows.forEach((row) => {
    calendarBody.appendChild(row);
  });
}

上述代码将生成的日期填充到日历表格中。

至此，我们已经完成了 JavaScript 部分的代码。

步骤 4：绑定事件

最后一步是绑定事件处理程序。我们需要为“上一个月”和“下一个月”按钮添加单击事件监听器。以下是一些示例代码：

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

prevMonthBtn.addEventListener("click", () => {
  currentMonth -= 1;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear -= 1;
  }
  updateCalendar(currentYear, currentMonth);
});

nextMonthBtn.addEventListener("click", () => {
  currentMonth += 1;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear += 1;
  }
  updateCalendar(currentYear, currentMonth);
});

function updateCalendar(year, month) {
  const dates = generateMonthDates(year, month);
  fillCalendar(dates);
  calendarMonth.textContent = `${months[month]} ${year}`;
}

上述代码将绑定“上一个月”和“下一个月”钮单击事件。单击“上一个月”按钮时，将减少当前月份计数器并更新日历。单击“下一个月”按钮时，将增加当前计数器并更新日历。updateCalendar函数中包括调用generateMonthDates和fillCalendar函数。

其余示例代码可在此处访问：https://codepen.io/sushengbuhuo/pen/bGBXQEv

现在，你已经掌握了编写 JavaScript 日历控件的基础知识！