javascript实现考勤日历功能

实现考勤日历功能的前置要求：

• 掌握HTML,CSS和JavaScript基础
• 了解Date对象及其相关方法
• 了解事件处理机制

下面开始我们的实现攻略：

步骤1：HTML骨架

我们需要先设计一个HTML骨架，用于放置后续动态生成的日历元素。

<div id="calendar">
    <div class="header">
        <div class="btn-prev">&lt;</div>
        <div class="btn-next">&gt;</div>
        <div class="header-title"></div>
    </div>
    <div class="week-days">
        <div class="day">一</div>
        <div class="day">二</div>
        <div class="day">三</div>
        <div class="day">四</div>
        <div class="day">五</div>
        <div class="day">六</div>
        <div class="day">日</div>
    </div>
    <div class="days"></div>
</div>

步骤2：生成日历日期

我们需要通过JavaScript来完成动态生成日期的效果，这里我们可以新建一个函数来实现。

function generateCalendar(year, month) {
    // 先清空日历元素
    document.querySelector('.days').innerHTML = '';

    // 生成当前月份的最后一天
    const lastDateOfMonth = new Date(year, month + 1, 0);

    // 遍历当前月份的所有日期
    for (let i = 1; i <= lastDateOfMonth.getDate(); i++) {
        const date = new Date(year, month, i);

        // 生成日期元素
        const $dateElement = document.createElement('div');
        $dateElement.classList.add('day');

        // 检测是否是今天
        if (isToday(date)) {
            $dateElement.classList.add('today');
        }

        // 检测是否是当前月份
        if (i === 1) {
            for (let j = 0; j < date.getDay() - 1; j++) {
                const $emptyDateElement = document.createElement('div');
                $emptyDateElement.classList.add('day');
                $emptyDateElement.classList.add('empty');
                document.querySelector('.days').appendChild($emptyDateElement);
            }
        }

        // 添加日期数字
        const $dateText = document.createElement('div');
        $dateText.classList.add('day-text');
        $dateText.innerText = i.toString();
        $dateElement.appendChild($dateText);

        // 添加日期元素
        document.querySelector('.days').appendChild($dateElement);
    }
}

这个函数将会负责整个日历中日期的动态生成，它需要输入两个参数year和month，分别表示日历的年份和月份。

步骤3：生成日历头部的月份信息

function generateHeader(year, month) {
    // 设置月份信息
    const monthText = `${year}年${month + 1}月`;
    document.querySelector('.header-title').innerText = monthText;
}

这个函数主要负责给日历头部的月份信息添加内容，同样需要输入year和month两个参数。

步骤4：页面加载完成后初始化日历

window.addEventListener('load', function () {
    const currentDate = new Date();
    generateHeader(currentDate.getFullYear(), currentDate.getMonth());
    generateCalendar(currentDate.getFullYear(), currentDate.getMonth());
});

这段代码主要负责当页面加载完成后，初始化日历的状态，首先获取当前的日期，然后调用generateHeader和generateCalendar两个函数初始化日历的状态。

步骤5：添加前进和后退功能

document.querySelector('.btn-prev').addEventListener('click', function () {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();
    generateHeader(currentYear, currentMonth - 1);
    generateCalendar(currentYear, currentMonth - 1);
});

document.querySelector('.btn-next').addEventListener('click', function () {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();
    generateHeader(currentYear, currentMonth + 1);
    generateCalendar(currentYear, currentMonth + 1);
});

这段代码主要负责监听日历头部前进和后退按钮的点击事件，并调用generateHeader和generateCalendar两个函数来切换日历的状态。

示例1：检测是否是今天

function isToday(date) {
    const todayDate = new Date();
    return date.getFullYear() === todayDate.getFullYear() &&
        date.getMonth() === todayDate.getMonth() &&
        date.getDate() === todayDate.getDate();
}

这段代码主要负责检测一个日期是否是今天，这个函数需要输入一个Date对象，它会返回一个布尔值，用于表示当前日期是否是今天。

示例2：设置空白日期

for (let j = 0; j < date.getDay() - 1; j++) {
    const $emptyDateElement = document.createElement('div');
    $emptyDateElement.classList.add('day');
    $emptyDateElement.classList.add('empty');
    document.querySelector('.days').appendChild($emptyDateElement);
}

这段代码主要负责在日历中添加空白的日期，使得日历中每个月的第一天对应的日期可以落在正确的星期几上面。它会在生成日历日期的过程中，检测当前日期是否是当前月份的第一天，如果是，就会添加一个或多个空白日期。