使用html输入某年的某月,打出该月的日历
时间: 2024-02-22 19:59:34 浏览: 49
MySQL数据库SQL语言学习指南:涵盖基础到优化
好的,我可以帮你写一个简单的HTML页面,让你可以输入年月,并显示出对应月份的日历。以下是代码:
```
<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
th {
background-color: #ddd;
}
</style>
</head>
<body>
<h2>输入年月,生成日历</h2>
<form>
<label for="year">年:</label>
<input type="number" id="year" name="year" min="1900" max="2100" value="2022">
<label for="month">月:</label>
<input type="number" id="month" name="month" min="1" max="12" value="1">
<input type="submit" value="生成日历">
</form>
<div id="calendar"></div>
<script>
function generateCalendar() {
let year = document.getElementById('year').value;
let month = document.getElementById('month').value;
let daysInMonth = new Date(year, month, 0).getDate();
let firstDay = new Date(year, month - 1, 1).getDay();
let calendarTable = '<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
let day = 1;
for (let i = 0; i < 6; i++) {
calendarTable += '<tr>';
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
calendarTable += '<td></td>';
} else if (day > daysInMonth) {
calendarTable += '<td></td>';
} else {
calendarTable += '<td>' + day + '</td>';
day++;
}
}
calendarTable += '</tr>';
}
calendarTable += '</table>';
document.getElementById('calendar').innerHTML = calendarTable;
}
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
generateCalendar();
});
</script>
</body>
</html>
```
你可以将这段代码复制到一个新的HTML文件中,然后在浏览器中打开,就可以使用了。在输入年月后,点击“生成日历”按钮,就可以在页面上看到对应月份的日历。
阅读全文