万年历是一个常见的前端开发项目，以下是一个简单的实现方式：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calendar</title>
<style>
.calendar {
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-collapse: collapse;
width: 100%;
}
.calendar th, .calendar td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.calendar th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table class="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<!-- JavaScript will populate this part -->
</tbody>
</table>
<script>
// JavaScript code to populate the calendar goes here
</script>
</body>
</html>
CSS:
/* Same as the CSS provided in the question */
JavaScript:
function getDaysInMonth(year, month) {
return new Date(year, month, 0).getDate();
}
function getStartingDay(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
function createCalendar(year, month) {
const daysInMonth = getDaysInMonth(year, month);
const startingDay = getStartingDay(year, month);
const tbody = document.querySelector('.calendar tbody');
let tr, td;
// Clear any existing rows
tbody.innerHTML = '';
// Create the first row with the days of the week
tr = document.createElement('tr');
for (let i = 0; i < 7; i++) {
td = document.createElement('td');
td.textContent = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][i];
tr.appendChild(td);
}
tbody.appendChild(tr);
// Create the rest of the rows for the month
for (let i = 0; i < (startingDay + daysInMonth); i++) {
if (i % 7 === 0) {
tr = document.createElement('tr');
}
td = document.createElement('td');