如何用js显示日历农历

如何用JS显示日历农历

在网页上显示日历并同时显示农历是一项有趣且实用的功能。使用JavaScript、结合农历转换算法、以及DOM操作，我们可以轻松实现这个功能。本文将详细介绍如何用JS显示包含农历的日历。

一、准备工作

在开始编写代码之前，我们需要了解以下几个基本概念：

阳历（公历）：即我们日常使用的西历。
阴历（农历）：中国传统的历法，通常用于传统节日和其他民俗活动。
DOM操作：使用JavaScript操作HTML文档对象模型。

二、农历转换算法

要实现农历的显示，我们首先需要一个农历转换算法。幸运的是，已经有很多现成的库可以帮助我们完成这个任务，比如Lunar.js。

1、引入Lunar.js库

<script src="https://cdn.jsdelivr.net/npm/lunar-javascript"></script>

三、创建基本的日历结构

首先，我们需要创建一个基本的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 #000;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/lunar-javascript"></script>
    <script src="calendar.js"></script>
</body>
</html>

四、使用JavaScript生成日历

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

1、生成阳历日历

function generateCalendar(year, month) {
    let firstDay = new Date(year, month, 1).getDay();
    let daysInMonth = new Date(year, month + 1, 0).getDate();
    let calendar = document.getElementById('calendar');
    calendar.innerHTML = '';
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');
    let daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    daysOfWeek.forEach(day => {
        let th = document.createElement('th');
        th.innerText = day;
        headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
    let row = document.createElement('tr');
    for (let i = 0; i < firstDay; i++) {
        let cell = document.createElement('td');
        row.appendChild(cell);
    }
    for (let i = 1; i <= daysInMonth; i++) {
        if (row.children.length === 7) {
            table.appendChild(row);
            row = document.createElement('tr');
        }
        let cell = document.createElement('td');
        cell.innerText = i;
        row.appendChild(cell);
    }
    table.appendChild(row);
    calendar.appendChild(table);
}
generateCalendar(new Date().getFullYear(), new Date().getMonth());

2、添加农历信息

使用Lunar.js库，我们可以轻松获取农历信息，并将其添加到日历中。

function generateCalendarWithLunar(year, month) {
    let firstDay = new Date(year, month, 1).getDay();
    let daysInMonth = new Date(year, month + 1, 0).getDate();
    let calendar = document.getElementById('calendar');
    calendar.innerHTML = '';
    let table = document.createElement('table');
    let headerRow = document.createElement('tr');
    let daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    daysOfWeek.forEach(day => {
        let th = document.createElement('th');
        th.innerText = day;
        headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
    let row = document.createElement('tr');
    for (let i = 0; i < firstDay; i++) {
        let cell = document.createElement('td');
        row.appendChild(cell);
    }
    for (let i = 1; i <= daysInMonth; i++) {
        if (row.children.length === 7) {
            table.appendChild(row);
            row = document.createElement('tr');
        }
        let cell = document.createElement('td');
        let date = new Date(year, month, i);
        let lunar = Lunar.fromDate(date);
        cell.innerHTML = `${i}<br><small>${lunar.getDayInChinese()}</small>`;
        row.appendChild(cell);
    }
    table.appendChild(row);
    calendar.appendChild(table);
}
generateCalendarWithLunar(new Date().getFullYear(), new Date().getMonth());

五、优化和扩展

1、添加导航功能

我们可以添加按钮来切换月份，提供更好的用户体验。

<button onclick="prevMonth()">Previous</button>
<button onclick="nextMonth()">Next</button>
<script>
    let currentYear = new Date().getFullYear();
    let currentMonth = new Date().getMonth();
    function prevMonth() {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        generateCalendarWithLunar(currentYear, currentMonth);
    }
    function nextMonth() {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        generateCalendarWithLunar(currentYear, currentMonth);
    }
    generateCalendarWithLunar(currentYear, currentMonth);
</script>

2、增加节日和节气

通过进一步扩展，我们可以在日历中显示传统节日和节气。

六、总结

以上就是用JavaScript显示日历并添加农历信息的基本方法。通过使用Lunar.js库、结合DOM操作，我们可以轻松创建一个功能丰富的日历。希望本文能够帮助你更好地理解和实现这个功能。如果你在项目中需要更复杂的功能，不妨尝试使用专业的项目管理系统，如研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助你更高效地管理和协作。