js怎么制作带法定节日日历

制作带法定节日日历的方法包括：使用JavaScript生成日历、添加法定节日数据、动态更新和优化显示等。下面我们将详细展开其中一点——使用JavaScript生成日历。

JavaScript生成日历的核心在于通过Date对象获取年份、月份及每个月的天数，并将这些信息动态生成到HTML页面中。具体步骤包括创建一个日期对象、计算每月的天数、生成日历表格并插入到DOM中。以下是详细的实现步骤和代码示例。

一、使用JavaScript生成日历

创建基本HTML结构

首先，我们需要创建一个基本的HTML结构来放置我们的日历。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带法定节日日历</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script src="calendar.js"></script>
</body>
</html>

使用JavaScript生成日历表格

接下来，我们将在calendar.js文件中编写JavaScript代码来生成日历。

function generateCalendar(year, month) {
    const calendar = document.getElementById('calendar');
    calendar.innerHTML = '';
    // Create table element
    const table = document.createElement('table');
    // Create table header
    const header = table.insertRow();
    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    for (let day of daysOfWeek) {
        const th = document.createElement('th');
        th.appendChild(document.createTextNode(day));
        header.appendChild(th);
    }
    // Create date rows
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    let date = 1;
    for (let i = 0; i < 6; i++) { // 6 weeks
        const row = table.insertRow();
        for (let j = 0; j < 7; j++) {
            const cell = row.insertCell();
            if (i === 0 && j < firstDay) {
                cell.appendChild(document.createTextNode(''));
            } else if (date > daysInMonth) {
                break;
            } else {
                cell.appendChild(document.createTextNode(date));
                date++;
            }
        }
    }
    calendar.appendChild(table);
}
// Generate calendar for the current month
const now = new Date();
generateCalendar(now.getFullYear(), now.getMonth());

二、添加法定节日数据

要让日历显示法定节日，我们需要一个包含法定节日的数据源，可以是一个对象或数组。然后，我们将这些节日标记在日历中。

const holidays = {
    '2023-01-01': 'New Year's Day',
    '2023-05-01': 'Labor Day',
    // Add other holidays here
};
function generateCalendar(year, month) {
    // ... previous code ...
    let date = 1;
    for (let i = 0; i < 6; i++) { 
        const row = table.insertRow();
        for (let j = 0; j < 7; j++) {
            const cell = row.insertCell();
            if (i === 0 && j < firstDay) {
                cell.appendChild(document.createTextNode(''));
            } else if (date > daysInMonth) {
                break;
            } else {
                const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
                if (holidays[dateStr]) {
                    cell.style.backgroundColor = '#ffcccc'; // Highlight holiday
                    cell.appendChild(document.createTextNode(`${date} (${holidays[dateStr]})`));
                } else {
                    cell.appendChild(document.createTextNode(date));
                }
                date++;
            }
        }
    }
    calendar.appendChild(table);
}

三、动态更新和优化显示

为了让日历更具交互性，我们可以添加月份切换功能，并优化其显示效果。

添加月份切换功能

<div id="controls">
    <button id="prev">Previous</button>
    <span id="monthYear"></span>
    <button id="next">Next</button>
</div>
<div id="calendar"></div>
<script src="calendar.js"></script>

在calendar.js中添加代码来处理月份的切换：

let currentYear = now.getFullYear();
let currentMonth = now.getMonth();
document.getElementById('prev').addEventListener('click', () => {
    if (currentMonth === 0) {
        currentYear--;
        currentMonth = 11;
    } else {
        currentMonth--;
    }
    updateCalendar();
});
document.getElementById('next').addEventListener('click', () => {
    if (currentMonth === 11) {
        currentYear++;
        currentMonth = 0;
    } else {
        currentMonth++;
    }
    updateCalendar();
});
function updateCalendar() {
    generateCalendar(currentYear, currentMonth);
    document.getElementById('monthYear').innerText = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}`;
}
// Initial call to setup the calendar
updateCalendar();

优化显示效果

可以通过CSS来优化日历的视觉效果，使其更加美观。

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
th, td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
}
th {
    background-color: #f2f2f2;
}
#controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
button {
    padding: 5px 10px;
    cursor: pointer;
}

总结：通过上述步骤，我们实现了一个带法定节日的动态日历。我们首先使用JavaScript生成日历表格，然后添加法定节日数据，并实现月份切换功能。最后，我们通过CSS优化了日历的显示效果。您可以根据需要进一步扩展此功能，例如添加更多节日、支持多语言等。