js实现日历方法
实现日历的基本思路
日历的核心功能包括显示当月日期、切换月份、高亮当前日期等。通过JavaScript动态生成HTML结构，结合CSS样式实现交互效果。
获取当前日期信息
使用Date对象获取当前年份、月份和日期，为后续生成日历提供基础数据。
const date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth();生成月份日历
计算当月天数及首日星期，生成日期表格。需要考虑跨月日期的显示。
function generateCalendar(year, month) {
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
let dates = [];
// 填充上月剩余日期
for (let i = 0; i < firstDay; i++) {
dates.push(null);
}
// 填充当月日期
for (let i = 1; i <= daysInMonth; i++) {
dates.push(i);
}
return dates;
}渲染日历界面
将生成的日期数组转换为HTML元素，创建表格布局。
function renderCalendar(dates) {
const calendarBody = document.getElementById('calendar-body');
calendarBody.innerHTML = '';
let row = document.createElement('tr');
dates.forEach((date, index) => {
if (index % 7 === 0 && index !== 0) {
calendarBody.appendChild(row);
row = document.createElement('tr');
}
const cell = document.createElement('td');
cell.textContent = date || '';
row.appendChild(cell);
});
calendarBody.appendChild(row);
}添加月份切换功能
实现向前和向后翻页按钮，更新日历显示。
document.getElementById('prev-month').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
updateCalendar();
});
document.getElementById('next-month').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
updateCalendar();
});
function updateCalendar() {
const dates = generateCalendar(currentYear, currentMonth);
renderCalendar(dates);
document.getElementById('month-year').textContent =
`${currentYear}年 ${currentMonth + 1}月`;
}高亮当前日期
在日历中突出显示今天的日期，增强用户体验。
function highlightToday() {
const today = new Date();
if (today.getFullYear() === currentYear && today.getMonth() === currentMonth) {
const cells = document.querySelectorAll('#calendar-body td');
cells.forEach(cell => {
if (parseInt(cell.textContent) === today.getDate()) {
cell.classList.add('today');
}
});
}
}完整实现示例
结合HTML和CSS，以下是完整日历实现的核心代码：
<div class="calendar">
<div class="header">
<button id="prev-month">上个月</button>
<h2 id="month-year"></h2>
<button id="next-month">下个月</button>
</div>
<table>
<thead>
<tr>
<th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
</div>// 初始化日历
document.addEventListener('DOMContentLoaded', () => {
updateCalendar();
highlightToday();
});日期选择功能扩展
为日历添加点击选择日期的交互功能，记录用户选择的日期。
document.getElementById('calendar-body').addEventListener('click', (e) => {
if (e.target.tagName === 'TD' && e.target.textContent) {
const selected = document.querySelector('.selected');
if (selected) selected.classList.remove('selected');
e.target.classList.add('selected');
console.log(`选中日期: ${currentYear}-${currentMonth+1}-${e.target.textContent}`);
}
});响应式布局优化
通过CSS媒体查询确保日历在不同设备上都能正常显示。
@media (max-width: 600px) {
.calendar {
width: 100%;
}
td {
padding: 5px;
font-size: 14px;
}
}
