js做日历完整代码
创建一个简单的日历应用使用JavaScript可能涉及一些HTML和CSS代码来显示日历的外观和样式。以下是一个基础的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 { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } tr:hover {background-color: #f5f5f5;} </style> </head> <body> <div id="calendar"></div> <script src="calendar.js"></script> </body> </html>
JavaScript部分（calendar.js）：
javascript复制代码function getDaysInMonth(month, year) { return new Date(year, month, 0).getDate(); } function printMonth(month, year) { let date = new Date(year, month, 1); let daysInMonth = getDaysInMonth(month, year); let firstDay = date.getDay(); let lastDay = new Date(year, month + 1, 0).getDate(); let calendarHTML = '<table border="1">'; calendarHTML += '<tr><th colspan="7">' + monthNames[month] + ' ' + year + '</th></tr>'; calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'; // 打印上个月的日期 for(let i = 0; i < firstDay; i++) { calendarHTML += '<td></td>'; } // 打印本月的日期 for(let day = 1; day <= daysInMonth; day++) { calendarHTML += '<td>' + day + '</td>'; if((day + firstDay - 1) % 7 === 0) { calendarHTML += '</tr><tr>'; } } // 打印下个月的日期 let remainingDays = 42 - (firstDay + daysInMonth); for(let i = 0; i < remainingDays; i++) { calendarHTML += '<td></td>'; if((i + remainingDays) % 7 === 0) { calendarHTML += '</tr><tr>'; } } calendarHTML += '</table>'; document.getElementById('calendar').innerHTML = calendarHTML; } // 月份名称 let monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ]; // 当前日期 let today = new Date(); let currentMonth = today.getMonth(); let currentYear = today.getFullYear(); printMonth(currentMonth, currentYear);
这个示例代码将创建一个简单的日历，显示当前月份的日期。你可以通过修改printMonth函数的参数来显示不同月份或年份的日历。同时，这个日历还考虑了上一个月和下一个月的日期，以确保每周都是完整的七天。
这个示例非常基础，没有包含很多功能，比如日期点击事件、月份和年份的切换等。如果你需要更复杂的功能，你可能需要使用一个库，比如fullcalendar或date-fns等，这些库提供了更多日历相关的功能。
