console
<!DOCTYPE html>
<html lang="zh-CN">
<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%;
max-width: 400px;
margin: 0 auto;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table id="calendar">
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
</table>
<script>
function generateCalendar() {
const date = new 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();
let dayOfWeek = firstDay.getDay() || 7;
const calendar = document.getElementById('calendar');
let row = document.createElement('tr');
for (let i = 1; i < dayOfWeek; i++) {
const cell = document.createElement('td');
row.appendChild(cell);
}
for (let day = 1; day <= daysInMonth; day++) {
if (dayOfWeek > 7) {
calendar.appendChild(row);
row = document.createElement('tr');
dayOfWeek = 1;
}
const cell = document.createElement('td');
cell.textContent = day;
row.appendChild(cell);
dayOfWeek++;
}
calendar.appendChild(row);
}
generateCalendar();
</script>
</body>
</html>