纯JS实现简单的日历

接下来我将详细讲解如何使用纯JS实现简单的日历。

步骤一：搭建基本框架

在HTML文件中创建一个容器，用于显示日历，并将其与CSS文件链接起来：

<div id="calendar"></div>

<link rel="stylesheet" href="calendar.css">

然后，在JS文件中，使用以下代码来获取日历容器，并为其创建一个日期表的框架：

// 获取日历容器
const calendar = document.getElementById('calendar');

// 获取当前日期
const now = new Date();

// 创建日期表框架
const table = document.createElement('table');

// 添加表头
const thead = document.createElement('thead');
thead.innerHTML = `
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
`;
table.appendChild(thead);

// 添加日期表格
const tbody = document.createElement('tbody');
table.appendChild(tbody);

// 将日期表格添加到日历容器中
calendar.appendChild(table);

步骤二：为日期表格添加日期

接下来，我们需要用JS动态地为日期表格添加日期。我们可以使用以下代码来循环添加日期：

// 获取当前月份的第一天
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

// 获取当前月份的最后一天
const lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);

// 循环添加日期
for (let date = 1; date <= lastDayOfMonth.getDate(); date++) {
  // 创建日期单元格
  const cell = document.createElement('td');
  cell.innerText = date;

  // 将日期单元格添加到日期表格中
  tbody.appendChild(cell);

  // 如果是当前日期，为日期单元格添加特殊样式
  if (date === now.getDate()) {
    cell.classList.add('today');
  }

  // 如果是星期六，为日期单元格添加样式
  if (new Date(now.getFullYear(), now.getMonth(), date).getDay() === 6) {
    cell.classList.add('saturday');
  }

  // 如果是星期日，为日期单元格添加样式
  if (new Date(now.getFullYear(), now.getMonth(), date).getDay() === 0) {
    cell.classList.add('sunday');
  }
}

这段代码将在日期表格中循环添加当前月份的所有日期，并为其中的特殊日期添加不同的样式。

步骤三：为日期表格添加事件监听

最后，我们可以为日期表格添加事件监听，以便当用户点击某个日期时，我们能够获取到这个日期，并执行特定的操作。以下是一个示例：

// 为日期表格添加事件监听
tbody.addEventListener('click', event => {
  const target = event.target;

  // 如果用户点击的是日期单元格
  if (target.tagName.toLowerCase() === 'td') {
    const date = new Date(now.getFullYear(), now.getMonth(), parseInt(target.innerText));
    alert(date.toLocaleDateString());
  }
});

这段代码将在日期表格上监听click事件。当用户点击日期单元格时，它会获取被点击单元格的日期，然后以弹窗的形式显示该日期。

示例说明

示例一

假设当前时间是2022年7月，我们可以使用以下代码来创建并显示一个7月份的日历：

// 获取日历容器
const calendar = document.getElementById('calendar');

// 获取当前日期
const now = new Date(2022, 6, 1);

// 创建日期表框架
const table = document.createElement('table');

// 添加表头
const thead = document.createElement('thead');
thead.innerHTML = `
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
`;
table.appendChild(thead);

// 添加日期表格
const tbody = document.createElement('tbody');
table.appendChild(tbody);

// 循环添加日期
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
for (let date = 1; date <= lastDayOfMonth.getDate(); date++) {
  const cell = document.createElement('td');
  cell.innerText = date;
  tbody.appendChild(cell);

  if (date === now.getDate()) {
    cell.classList.add('today');
  }

  if (new Date(now.getFullYear(), now.getMonth(), date).getDay() === 6) {
    cell.classList.add('saturday');
  }

  if (new Date(now.getFullYear(), now.getMonth(), date).getDay() === 0) {
    cell.classList.add('sunday');
  }
}

// 将日期表格添加到日历容器中
calendar.appendChild(table);

这段代码将创建并显示一个2022年7月份的日历。

示例二

接下来，我们可以为日期表格添加时间监听，以便当用户点击某个日期时，我们能够获取到这个日期，并执行特定的操作。以下是一个示例：

// 为日期表格添加事件监听
tbody.addEventListener('click', event => {
  const target = event.target;

  // 如果用户点击的是日期单元格
  if (target.tagName.toLowerCase() === 'td') {
    const date = new Date(now.getFullYear(), now.getMonth(), parseInt(target.innerText));
    alert(date.toLocaleDateString());
  }
});

这段代码将在日期表格上监听click事件。当用户点击日期单元格时，它会获取被点击单元格的日期，然后以弹窗的形式显示该日期。