好的，下面是
一个简单的
HTML+
CSS+JS
实现的日历，包含节假日的显示：
HTML代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<link rel="stylesheet" type="text/
css" href="calendar.
css">
</head>
<body>
<div class="calendar">
<div class="header">
<span class="prev" onclick="prevMonth()"><</span>
<span class="date" id="date"></span>
<span class="next" onclick="nextMonth()">></span>
</div>
<table>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<script src="calendar.js"></script>
</body>
</
html>
```
CSS代码：
```
css
.calendar {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
font-size: 14px;
font-family: Arial, sans-serif;
}
.header {
background-color: #f0f0f0;
text-align: center;
padding: 10px;
position: relative;
}
.header span {
cursor: pointer;
}
.prev {
position: absolute;
left: 10px;
top: 10px;
}
.next {
position: absolute;
right: 10px;
top: 10px;
}
.date {
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
tbody td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.today {
background-color: #c0c0c0;
}
.holiday {
color: red;
}
```
JS代码：
```js
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var tbody = document.getElementById("tbody");
var dateEle = document.getElementById("date");
// 获取当前月份的天数
function getDaysInMonth(year, month) {
return new Date(year, month, 0).getDate();
}
// 获取当前月份第一天是星期几
function getFirstDayOfWeek(year, month) {
return new Date(year, month - 1, 1).getDay();
}
// 获取当前月份的所有日期
function getDates(year, month) {
var daysInMonth = getDaysInMonth(year, month);
var firstDayOfWeek = getFirstDayOfWeek(year, month);
var dates = [];
for (var i = 1; i <= daysInMonth; i++) {
dates.push(i);
}
for (var i = 0; i < firstDayOfWeek; i++) {
dates.unshift("");
}
return dates;
}
// 获取指定日期的节假日
function getHoliday(year, month, day) {
var holidays = {
"0101": "元旦",
"0214": "情人节",
"0308": "妇女节",
"0312": "植树节",
"0401": "愚人节",
"0501": "劳动节",
"0601": "儿童节",
"0701": "建党节",
"0801": "建军节",
"0910": "教师节",
"1001": "国庆节",
"1224": "平安夜",
"1225": "圣诞节"
};
var monthStr = (month < 10 ? "0" : "") + month;
var dayStr = (day < 10 ? "0" : "") + day;
var dateStr = monthStr + dayStr;
if (holidays[dateStr]) {
return holidays[dateStr];
}
return "";
}
// 显示指定年月的日历
function showCalendar(year, month) {
var dates = getDates(year, month);
var
html = "";
for (var i = 0; i < dates.length; i++) {
if (i % 7 === 0) {
html += "<tr>";
}
var date = dates[i];
var holiday = getHoliday(year, month, date);
if (holiday !== "") {
html += '<td class="holiday">' + date + '<br>' + holiday + '</td>';
} else if (date !== "") {
if (year === new Date().getFullYear() && month === new Date().getMonth() + 1 && date === new Date().getDate()) {
html += '<td class="today">' + date + '</td>';
} else {
html += "<td>" + date + "</td>";
}
} else {
html += "<td></td>";
}
if (i % 7 === 6) {
html += "</tr>";
}
}
tbody.inner
HTML =
html;
dateEle.inner
HTML = year + "年" + month + "月";
}
// 上
一个月
function prevMonth() {
month--;
if (month < 1) {
month = 12;
year--;
}
showCalendar(year, month);
}
// 下
一个月
function nextMonth() {
month++;
if (month > 12) {
month = 1;
year++;
}
showCalendar(year, month);
}
// 显示当前月份的日历
showCalendar(year, month);
```
这个日历会显示当前月份的日期，并标出当天和节假日。你可以根据自己的需要修改
CSS样式和节假日数据。
最低0.47元/天 解锁文章
4902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
