js日历实现
实现日历的基本思路
日历的核心功能是展示日期，并允许用户选择日期。需要处理年、月、日的计算，以及界面布局。
获取当前日期
使用 Date 对象获取当前日期信息：
const date = new Date();
const currentYear = date.getFullYear();
const currentMonth = date.getMonth();生成日历网格
计算某个月的第一天是星期几，以及该月的总天数：
function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
function getFirstDayOfMonth(year, month) {
return new Date(year, month, 1).getDay();
}渲染日历
创建日历的 HTML 结构并填充日期：
function renderCalendar(year, month) {
const daysInMonth = getDaysInMonth(year, month);
const firstDay = getFirstDayOfMonth(year, month);
let html = '<div class="calendar">';
html += '<div class="header">...</div>';
html += '<div class="days">';
// 填充空白格子（上个月末尾的几天）
for (let i = 0; i < firstDay; i++) {
html += '<div class="day empty"></div>';
}
// 填充当月日期
for (let i = 1; i <= daysInMonth; i++) {
html += `<div class="day">${i}</div>`;
}
html += '</div></div>';
document.getElementById('calendar').innerHTML = html;
}添加交互功能
为日期添加点击事件处理：
document.addEventListener('click', function(e) {
if (e.target.classList.contains('day') && !e.target.classList.contains('empty')) {
const selectedDay = parseInt(e.target.textContent);
// 处理日期选择逻辑
}
});月份切换功能
实现上一月和下一月的切换按钮：
document.getElementById('prev-month').addEventListener('click', function() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar(currentYear, currentMonth);
});
document.getElementById('next-month').addEventListener('click', function() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentYear, currentMonth);
});样式设计
基本的 CSS 样式：
.calendar {
width: 300px;
font-family: Arial;
}
.header {
display: flex;
justify-content: space-between;
padding: 10px;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.day {
padding: 10px;
text-align: center;
cursor: pointer;
}
.day:hover {
background-color: #eee;
}
.empty {
visibility: hidden;
}完整示例
将上述代码整合到一个 HTML 文件中：
<!DOCTYPE html>
<html>
<head>
<style>
/* 上面的CSS样式 */
</style>
</head>
<body>
<div id="calendar"></div>
<button id="prev-month">上一月</button>
<button id="next-month">下一月</button>
<script>
// 上面的JavaScript代码
</script>
</body>
</html>高级功能扩展
增加标记特殊日期的功能：
const specialDates = {
'2023-10-1': '国庆节',
'2023-12-25': '圣诞节'
};
function renderCalendar(year, month) {
// ...之前的代码...
for (let i = 1; i <= daysInMonth; i++) {
const dateStr = `${year}-${month + 1}-${i}`;
const special = specialDates[dateStr];
html += `<div class="day" data-date="${dateStr}">${i}${special ? '<br>' + special : ''}</div>`;
}
// ...之后的代码...
}响应式设计
使用媒体查询使日历适应不同屏幕尺寸：
@media (max-width: 600px) {
.calendar {
width: 100%;
}
.day {
padding: 5px;
font-size: 14px;
}
}
