html 完整日历功能
时间: 2023-10-13 14:16:30 浏览: 38
要实现完整的日历功能,需要使用HTML、CSS和JavaScript技术。以下是一个简单的HTML日历示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
text-align: center;
padding: 10px;
}
th {
background-color: #ccc;
}
td.today {
background-color: #eee;
}
</style>
</head>
<body>
<div>
<button id="prev">Prev</button>
<span id="month-year"></span>
<button id="next">Next</button>
</div>
<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>
var date = new Date();
var today = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var prevBtn = document.getElementById("prev");
var nextBtn = document.getElementById("next");
var monthYear = document.getElementById("month-year");
var calendarBody = document.getElementById("calendar-body");
prevBtn.addEventListener("click", function() {
month--;
if (month < 0) {
year--;
month = 11;
}
renderCalendar();
});
nextBtn.addEventListener("click", function() {
month++;
if (month > 11) {
year++;
month = 0;
}
renderCalendar();
});
function renderCalendar() {
var daysInMonth = new Date(year, month + 1, 0).getDate();
var firstDay = new Date(year, month, 1).getDay();
monthYear.innerHTML = getMonthName(month) + " " + year;
calendarBody.innerHTML = "";
var date = 1;
for (var row = 0; row < 6; row++) {
var tr = document.createElement("tr");
for (var col = 0; col < 7; col++) {
var td = document.createElement("td");
if (row === 0 && col < firstDay) {
td.innerHTML = "";
} else if (date > daysInMonth) {
td.innerHTML = "";
} else {
td.innerHTML = date;
if (date === today && month === new Date().getMonth() && year === new Date().getFullYear()) {
td.classList.add("today");
}
date++;
}
tr.appendChild(td);
}
calendarBody.appendChild(tr);
}
}
function getMonthName(month) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return monthNames[month];
}
renderCalendar();
</script>
</body>
</html>
```
这个示例中,我们使用了一个表格来显示日历。表格头显示星期几,表格体显示每个日期。我们还添加了一个前后按钮和一个当前月份/年份文本框。用户可以使用这些按钮来切换月份。
当用户单击前一个或下一个按钮时,我们会减少或增加月份并重新渲染日历。我们使用一个 `renderCalendar` 函数来呈现日历。在这个函数中,我们首先计算出当前月份的天数和第一天是星期几。然后我们循环6行并在每列中插入一个单元格,以显示日期。我们还检查日期是否为今天,并将其突出显示。
这只是一个简单的日历示例,但您可以根据需要进行修改和扩展。