使用html输入月份打出该月的日历
时间: 2023-08-19 08:04:59 浏览: 173
以下是一个简单的 HTML/JavaScript 代码示例,可以让用户输入月份,然后生成该月的日历:
```html
<!DOCTYPE html>
<html>
<head>
<title>生成日历</title>
</head>
<body>
<h1>生成日历</h1>
<form>
<label for="month">请输入月份(1-12):</label>
<input type="number" id="month" name="month" min="1" max="12">
<button type="button" onclick="generateCalendar()">生成日历</button>
</form>
<hr>
<div id="calendar"></div>
<script>
function generateCalendar() {
// 获取用户输入的月份
var month = document.getElementById("month").value;
// 检查输入是否合法
if (month < 1 || month > 12) {
alert("请输入合法的月份(1-12)!");
return;
}
// 计算该月第一天是星期几
var firstDay = new Date(2022, month - 1, 1).getDay();
// 计算该月有多少天
var days = new Date(2022, month, 0).getDate();
// 生成日历表格
var table = "<table border='1'><tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr><tr>";
// 在第一行上添加空格,使第一天对应到正确的星期
for (var i = 0; i < firstDay; i++) {
table += "<td></td>";
}
// 生成日历表格的主体部分
var day = 1;
for (var i = firstDay; i < 7; i++) {
table += "<td>" + day + "</td>";
day++;
}
table += "</tr>";
while (day <= days) {
table += "<tr>";
for (var i = 0; i < 7 && day <= days; i++) {
table += "<td>" + day + "</td>";
day++;
}
table += "</tr>";
}
// 结束日历表格
table += "</table>";
// 将日历表格插入到页面中
document.getElementById("calendar").innerHTML = table;
}
</script>
</body>
</html>
```
该代码中,通过使用 HTML 表单和 JavaScript 代码,实现了用户输入月份后生成该月日历的功能。具体实现方式是:获取用户输入的月份,计算该月第一天是星期几和该月有多少天,然后使用 HTML 表格标签生成日历表格,并将其插入到页面中。需要注意的是,在生成日历表格时,需要考虑到每个月的第一天可能不是星期日,因此需要在第一行上添加空格,使第一天对应到正确的星期。
阅读全文