怎么用Js做日历

如何用JavaScript制作日历

使用JavaScript制作日历的方法包括：创建HTML结构、使用CSS进行样式设计、编写JavaScript逻辑生成日历、处理日期的计算。 其中，最关键的一点是编写JavaScript逻辑生成日历。这需要掌握基本的日期处理方法和操作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>JavaScript Calendar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calendar">
        <div id="calendar-header">
            <button id="prev-month">Prev</button>
            <h2 id="month-year"></h2>
            <button id="next-month">Next</button>
        </div>
        <div id="calendar-body">
            <div id="weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
            </div>
            <div id="days"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、使用CSS进行样式设计

接下来，我们使用CSS对日历进行基本的样式设计，使其看起来更加美观。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
#calendar {
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
}
#calendar-body {
    display: flex;
    flex-direction: column;
}
#weekdays, #days {
    display: flex;
    flex-wrap: wrap;
}
#weekdays div, #days div {
    width: calc(100% / 7);
    text-align: center;
    padding: 10px 0;
}
#days div {
    border: 1px solid #f0f0f0;
    cursor: pointer;
}
#days div:hover {
    background-color: #f0f0f0;
}
#days .current-day {
    background-color: #007bff;
    color: white;
}

三、编写JavaScript逻辑生成日历

最后，我们编写JavaScript逻辑来生成日历并处理日期的计算。

document.addEventListener('DOMContentLoaded', function() {
    const calendar = document.getElementById('calendar');
    const monthYear = document.getElementById('month-year');
    const daysContainer = document.getElementById('days');
    const prevMonthBtn = document.getElementById('prev-month');
    const nextMonthBtn = document.getElementById('next-month');
    let currentDate = new Date();
    function renderCalendar(date) {
        // 清空原有的日期
        daysContainer.innerHTML = '';
        const year = date.getFullYear();
        const month = date.getMonth();
        // 设置当前月份和年份
        monthYear.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;
        // 获取当前月份的第一天和最后一天
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        // 获取星期几（0-6）和总天数
        const firstDayWeek = firstDay.getDay();
        const totalDays = lastDay.getDate();
        // 创建前置空白格
        for (let i = 0; i < firstDayWeek; i++) {
            const blankDay = document.createElement('div');
            daysContainer.appendChild(blankDay);
        }
        // 创建日期格
        for (let i = 1; i <= totalDays; i++) {
            const day = document.createElement('div');
            day.textContent = i;
            if (i === date.getDate() && date.getMonth() === currentDate.getMonth() && date.getFullYear() === currentDate.getFullYear()) {
                day.classList.add('current-day');
            }
            daysContainer.appendChild(day);
        }
    }
    prevMonthBtn.addEventListener('click', function() {
        currentDate.setMonth(currentDate.getMonth() - 1);
        renderCalendar(currentDate);
    });
    nextMonthBtn.addEventListener('click', function() {
        currentDate.setMonth(currentDate.getMonth() + 1);
        renderCalendar(currentDate);
    });
    renderCalendar(currentDate);
});

四、处理日期的计算

在JavaScript中，日期的计算是实现日历功能的关键。我们需要处理各种情况，如闰年、不同月份的天数等。

1、获取月份的天数

可以通过创建一个新的Date对象并设置其日期为0来获取上一个月的最后一天，从而确定当前月份的天数。

function getDaysInMonth(year, month) {
    return new Date(year, month + 1, 0).getDate();
}

2、处理闰年

判断闰年的方法是：如果年份能被4整除，但不能被100整除，或者能被400整除，则为闰年。

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

3、处理星期几

我们可以通过Date对象的getDay方法获取某一天是星期几，返回值是0（星期日）到6（星期六）。

const firstDayOfWeek = new Date(year, month, 1).getDay();

五、增强日历功能

在基础日历功能的基础上，我们可以进一步增强日历的功能，如添加事件、切换视图等。

1、添加事件

我们可以通过给日期格子添加点击事件来实现添加事件的功能。

daysContainer.addEventListener('click', function(e) {
    if (e.target.tagName === 'DIV' && e.target.textContent) {
        const selectedDay = e.target.textContent;
        alert(`You selected: ${selectedDay}-${currentDate.getMonth() + 1}-${currentDate.getFullYear()}`);
    }
});

2、切换视图

我们可以添加按钮来切换日历的视图，如月视图、年视图等。

<button id="toggle-view">Toggle View</button>

let isMonthView = true;
document.getElementById('toggle-view').addEventListener('click', function() {
    isMonthView = !isMonthView;
    if (isMonthView) {
        renderCalendar(currentDate);
    } else {
        renderYearView(currentDate);
    }
});
function renderYearView(date) {
    // 清空原有的日期
    daysContainer.innerHTML = '';
    monthYear.textContent = date.getFullYear();
    for (let i = 0; i < 12; i++) {
        const monthDiv = document.createElement('div');
        monthDiv.textContent = new Date(date.getFullYear(), i).toLocaleString('default', { month: 'short' });
        monthDiv.classList.add('month-view');
        daysContainer.appendChild(monthDiv);
    }
}

通过这些步骤，我们成功地使用JavaScript制作了一个功能完备的日历。这个日历不仅能够显示当前月份，还能够切换月份和视图，并且可以通过点击日期来添加事件。希望这些内容能帮助你更好地理解和制作JavaScript日历。