用H builder写一个日历。
时间: 2023-06-09 17:06:57 浏览: 84
好的,你可以先创建一个HTML页面,并在页面中添加一个表格来显示日历。然后使用JavaScript编写函数来生成日期,将生成的日期填入表格中。以下是一个简的日历代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1>Calendar</h1>
<table>
<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 id="calendar-body">
</tbody>
</table>
<script>
function createCalendar(year, month) {
var tableBody = document.getElementById("calendar-body");
tableBody.innerHTML = "";
var date = new Date(year, month - 1, 1);
while (date.getDay() !== 0) {
date.setDate(date.getDate() - 1);
}
while ((date.getMonth() < month) || (date.getMonth() === 11 && month === 1)) {
var row = document.createElement("tr");
for (var i = 0; i < 7; i++) {
var cell = document.createElement("td");
cell.textContent = date.getDate();
row.appendChild(cell);
date.setDate(date.getDate() + 1);
}
tableBody.appendChild(row);
}
}
createCalendar(2021, 8);
</script>
</body>
</html>
```
在这个示例中,使用了createCalendar函数来生成日历,该函数需要两个参数:年份和月份。函数会根据这两个参数来生成一个表示所选月份的日历。我们还可以使用JavaScript来添加更多功能,如点击日期时显示详细信息等等。