教你用js实现日历功能「附代码示例」

1. 前言

在web开发中，日历功能是一个非常常见的组件。通过使用JavaScript编写的日历，可以在网页上显示月份、年份以及日期，配合点击事件等交互效果，让用户可以更加方便的查看和管理时间。本文主要介绍如何使用JavaScript实现一款基本的日历组件，并提供相应的代码以供参考。

2. HTML结构

为了实现日历功能，我们需要在HTML中添加相应的元素用来展示日历，以下是HTML结构示例：

<div class="calendar">

  <div class="calendar-header">
    <div class="prev"><a href="#">&#10094;</a></div>
    <div class="calendar-title"></div>
    <div class="next"><a href="#">&#10095;</a></div>
  </div>
  <table class="calendar-body">
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

以上HTML代码会生成一个包含基本日历结构的div容器，其中：

- calendar-header：包含上个月、下个月按钮以及标题；

- calendar-title：标题区域；

- calendar-body：包含日历表格；

- tbody：日历表格中所有日期的显示和方便js操作的位置。

3. CSS样式

为了展示更好的日历效果，我们需要对日历结构进行样式的设置，以下是CSS示例代码：

/* 日历容器 */

.calendar {
  font-family: Arial, sans-serif;
  display: inline-block;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 5px #ccc;
}
/* 日历头部 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 5px;
  padding: 0 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}
/* 日历头部按钮 */
.prev,
.next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 100%;
}
.prev a,
.next a {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.prev a:hover,
.next a:hover {
  color: #333;
}
/* 日历标题 */
.calendar-title {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  width: 60%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 日历表格 */
.calendar-body {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
/* 日历表格头部 */
.calendar-body th {
  height: 25px;
  font-size: 14px;
  color: #666;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
/* 日历表格主要内容 */
.calendar-body td {
  height: 25px;
  font-size: 14px;
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
}
/* 日历表格当前日期样式 */
.calendar-body .today {
  background-color: #ff0;
}
/* 日历表格选中日期样式 */
.calendar-body .selected {
  background-color: #f00;
  color: #fff;
}

以上代码会为我们的日历组件提供基本的外观样式。

4. JavaScript实现

接下来，我们通过JavaScript实现日历组件，在上述HTML和CSS基础上，通过JavaScript动态添加月份以及日期等动态效果。以下是实现代码：

const calendar = document.querySelector('.calendar');

const table = calendar.querySelector('table');
const title = calendar.querySelector('.calendar-title');
initCalendar();
function initCalendar() {
  let today = new Date();
  let currentMonth = today.getMonth(), currentYear = today.getFullYear();
  
  let prevBtn = calendar.querySelector('.prev a');
  prevBtn.addEventListener('click', function() {
    currentMonth--;
    renderCalendar(currentMonth, currentYear);
  });
  
  let nextBtn = calendar.querySelector('.next a');
  nextBtn.addEventListener('click', function() {
    currentMonth++;
    renderCalendar(currentMonth, currentYear);
  });
  
  renderCalendar(currentMonth, currentYear);
}
function renderCalendar(month, year) {
  let today = new Date();
  let firstDay = new Date(year, month, 1);
  let lastDay = new Date(year, month + 1, 0);
  
  title.innerHTML = `${year}年${month + 1}月`;
  
  let daysInMonth = lastDay.getDate();
  let firstDayOfWeek = firstDay.getDay();
  
  let rows = table.rows;
  let rowIndex = 0;
  
  for (let i = 1 - firstDayOfWeek; i <= daysInMonth; i++) {
    let cell = rows[rowIndex].cells[firstDay.getDay() + i];
    
    cell.innerHTML = i > 0 ? i : '';
    
    if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
      cell.classList.add('today');
    } else {
      cell.classList.remove('today');
    }
    
    if (cell.innerHTML != '') {
      cell.addEventListener('click', function() {
        let selected = calendar.querySelector('.selected');
        if (selected != null) {
          selected.classList.remove('selected');
        }
        cell.classList.add('selected');
      });
    }
    
    if (firstDay.getDay() + i === 6 || firstDay.getDay() + i === 0 || i === daysInMonth) {
      rowIndex++;
    }
  }
}

代码实现主要包括以下几个步骤：

1. 使用querySelector获取calendar、table以及title元素。

2. 初始化日历，在initCalendar函数中设置默认的当前月份、年份以及前后翻页按钮监听事件。

3. 渲染日历，在renderCalendar函数中按月份、年份显示对应的日历信息。

4. 为日历表格添加样式和交互效果。在这里，我们通过监听每个日期表格的click事件，为选中的日期添加样式。

5. 总结

在本文中，我们介绍了如何用JavaScript实现一个简单的日历组件，通过控制DOM元素的显示和交互效果，实现了比较基本的日历功能。通过学习本文，你可以进一步了解JavaScript调用日期对象的相关知识，同时也可以更好的掌握JavaScript与DOM元素的交互。

希望本文对于初学者们掌握JavaScript的基本知识，以及理解和运用JavaScript实现日历功能有帮助。