html实现本月日历
时间: 2023-12-28 15:05:25 浏览: 31
以下是一个使用HTML、CSS和JavaScript实现本月日历的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>本月日历</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid #ccc;
}
td:hover {
background-color: #eee;
}
.today {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<h1>本月日历</h1>
<table id="calendar">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var calendar = document.getElementById("calendar");
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var firstDay = new Date(year, month - 1, 1).getDay();
var days = new Date(year, month, 0).getDate();
var rows = Math.ceil((firstDay + days) / 7);
var day = 1;
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 7; j++) {
var td = document.createElement("td");
if (i == 0 && j < firstDay) {
td.innerHTML = "";
} else if (day > days) {
td.innerHTML = "";
} else {
td.innerHTML = day;
if (year == today.getFullYear() && month == today.getMonth() + 1 && day == date) {
td.className = "today";
}
day++;
}
tr.appendChild(td);
}
calendar.appendChild(tr);
}
</script>
</body>
</html>
```