前端 html css js 实现日历效果

Question

怎么通过css html js实现一个可以切换的日历啊右边这个样子的 😭

Answer 1

可以通过以下步骤来实现一个切换的日历：

1. 先使用 HTML 和 CSS 构建和样式化日历的基本框架，包括年份、月份的标题以及日期等元素。一般地，可以使用一个 table 元素作为容器，并在其中嵌套多个 tr 和 td 元素绘制日历的每一天。

2. 使用 JavaScript 获取当前的日期，还有将要展示的年份和月份信息，然后动态生成对应年月份的日历表格，更新到页面上。

3. 实现切换功能。可以添加 "left" 和 "right" 的箭头图标或按钮元素，通过监听点击事件，以及相应的逻辑计算，实现向前或向后切换月份的操作。

下面是一个示例代码，仅供参考：

HTML:

<div class="calendar">
    <div class="header">
        <i class="fa fa-angle-left" id="prevBtn"></i>
        <h2 id="title"></h2>
        <i class="fa fa-angle-right" id="nextBtn"></i>
    </div>
    <table>
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody id="days"></tbody>
    </table>
</div>

CSS:

.calendar {
    width: 300px;
    margin: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.fa-angle-left, .fa-angle-right {
    font-size: 24px;
    cursor: pointer;
}

#title {
    font-size: 22px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
}

td:not(.empty):hover {
    background-color: #eee;
    cursor: pointer;
}

JavaScript:

const title = document.getElementById('title');
const days = document.getElementById('days');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

// 获取当前日期信息，使用 Date 对象
const currentDate = new Date();

// 定义全局变量 selectedDate 和 currentMonth
let selectedDate = currentDate;
let currentMonth;

function generateCalendar() {
    // 清空日历表格内容
    days.innerHTML = '';

    const firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
    const lastDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0); 
    const daysInMonth = lastDayOfMonth.getDate();

    // 计算要显示的上一个月或下一个月的日期数
    const daysInPrevMonth = firstDayOfMonth.getDay();
    const daysInNextMonth = 6 - lastDayOfMonth.getDay();

    // 更新标题显示
    title.innerText = `${currentMonth.getFullYear()} / ${currentMonth.getMonth() + 1}`;

    // 显示前一月的日期信息
    for(let i = daysInPrevMonth; i > 0; i--) {
        const prevCurrDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i - 1);
        const cell = document.createElement('td');
        cell.classList.add('empty');
        cell.innerText = prevCurrDate.getDate();
        days.appendChild(cell);
    }

    // 显示这个月的日期信息
    for(let i = 1; i <= daysInMonth; i++) {
        const currDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i);
        const cell = document.createElement('td');

        // 添加选中状态的样式
        if(currDate.toDateString() === selectedDate.toDateString()) {
            cell.classList.add('selected');
        }

        cell.innerText = i;
        days.appendChild(cell);

        // 添加日期点击事件
        cell.addEventListener('click', () => {
            selectedDate = currDate;
            generateCalendar();
        });
    }

    // 显示下一个月的日期信息
    for(let i = 1; i <= daysInNextMonth; i++) {
        const nextCurrDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, i);
        const cell = document.createElement('td');
        cell.classList.add('empty');
        cell.innerText = nextCurrDate.getDate();
        days.appendChild(cell);
    }
}

// 初始生成当前月的日历表格
currentMonth = currentDate;
generateCalendar();

// 前一月按钮点击事件监听
prevBtn.addEventListener('click', () => {
    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
    generateCalendar();
});

// 后一月按钮点击事件监听
nextBtn.addEventListener('click', () => {
    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
    generateCalendar();
});