问js万年历代码

三、JS万年历代码示例

```html

上一月

下一月

<script>

let currentDate = new Date();

const holidays = {

'01-01': '元旦',

'02-14': '情人节',

'05-01': '劳动节',

'10-01': '国庆节'

};

function renderCalendar(date) {

const year = date.getFullYear();

const month = date.getMonth();

const firstDay = new Date(year, month, 1);

const lastDay = new Date(year, month + 1, 0);

const daysInMonth = lastDay.getDate();

const startDay = firstDay.getDay(); // 0=周日, 1=周一...

const calendarBody = document.getElementById('calendarBody');

calendarBody.innerHTML = '';

document.getElementById('monthYear').innerText = `${year} 年 ${month + 1} 月`;

let row = document.createElement('tr');

for (let i = 0; i < startDay; i++) {

const cell = document.createElement('td');

row.appendChild(cell);

}

for (let day = 1; day <= daysInMonth; day++) {

const cell = document.createElement('td');

cell.innerText = day;

const key = `${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

if (holidays[key]) {

cell.style.color = 'red';

cell.title = holidays[key];

}

row.appendChild(cell);

if ((startDay + day) % 7 === 0) {

calendarBody.appendChild(row);

row = document.createElement('tr');

}

}

if (row.children.length > 0) {

calendarBody.appendChild(row);

}

}

function prevMonth() {

currentDate.setMonth(currentDate.getMonth() - 1);

renderCalendar(currentDate);

}

function nextMonth() {

currentDate.setMonth(currentDate.getMonth() + 1);

renderCalendar(currentDate);

}

renderCalendar(currentDate);

</script>

```

四、总结

通过上述代码，我们可以实现一个基本的 JS 万年历功能，具备如下特点：

- 简洁易懂，适合初学者学习

- 可扩展性强，可添加更多功能（如农历、天气等）

- 基于原生 JavaScript，兼容性好

如果你希望进一步优化，可以考虑引入第三方库（如 [date-fns](https://date-fns.org/)）来简化日期操作，或者使用框架（如 Vue、React）来构建更复杂的界面。

以上内容为原创总结，适用于教学、项目参考或个人学习使用。

　　免责声明：本答案或内容为用户上传，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 如遇侵权请及时联系本站删除。