仿百度日历老黄历功能,带节日
时间: 2024-04-21 16:08:27 浏览: 11
你想了解如何实现一个仿百度日历老黄历功能的日历吗?这个功能包括了节日信息、黄历信息和宜忌信息。以下是一个简单的 JavaScript 实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿百度日历老黄历功能</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid black;
}
th {
background-color: #ddd;
}
td {
height: 80px;
}
.today {
background-color: yellow;
}
.holiday {
color: red;
}
.good {
color: green;
}
.bad {
color: red;
}
</style>
</head>
<body>
<h1>仿百度日历老黄历功能</h1>
<table>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody id="calendar-body">
</tbody>
</table>
<script>
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const today = date.getDate();
const daysInMonth = new Date(year, month, 0).getDate();
const firstDay = new Date(year, month - 1, 1).getDay();
const calendarBody = document.getElementById('calendar-body');
let dateCells = '';
let day = 1;
for (let i = 0; i < 6; i++) {
dateCells += '<tr>';
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
dateCells += '<td></td>';
} else if (day > daysInMonth) {
break;
} else {
let holiday = '';
let goodOrBad = '';
if (month === 1 && day === 1) {
holiday = '元旦';
goodOrBad = 'good';
} else if (month === 2 && day === 14) {
holiday = '情人节';
goodOrBad = 'good';
} else if (month === 3 && day === 8) {
holiday = '妇女节';
goodOrBad = 'good';
} else if (month === 4 && day === 1) {
holiday = '愚人节';
goodOrBad = 'bad';
} else if (month === 5 && day === 1) {
holiday = '劳动节';
goodOrBad = 'good';
} else if (month === 6 && day === 1) {
holiday = '儿童节';
goodOrBad = 'good';
} else if (month === 7 && day === 1) {
holiday = '建党节';
goodOrBad = 'good';
} else if (month === 8 && day === 1) {
holiday = '建军节';
goodOrBad = 'good';
} else if (month === 9 && day === 10) {
holiday = '教师节';
goodOrBad = 'good';
} else if (month === 10 && day === 1) {
holiday = '国庆节';
goodOrBad = 'good';
} else if (month === 12 && day === 25) {
holiday = '圣诞节';
goodOrBad = 'good';
}
if (holiday) {
dateCells += '<td class="' + goodOrBad + ' holiday">' + holiday + '</td>';
} else {
dateCells += '<td>' + day + '</td>';
}
day++;
}
}
dateCells += '</tr>';
if (day > daysInMonth) {
break;
}
}
calendarBody.innerHTML = dateCells;
</script>
</body>
</html>
```
这个示例会生成当前月份的日历,同时会根据日期判断是否是节日,如果是节日则对应显示节日信息和宜忌信息。你可以根据需要进行修改。