SOURCE

console 命令行工具 X clear

                    
>
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; // 将周日从0改为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>