带节日农历的JS万年历

原创已于 2025-06-27 15:23:58 修改 · 939 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-01 14:58:18 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带节日农历的JS万年历</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}

body {
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}

.calendar-container {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
overflow: hidden;
}

.calendar-header {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 20px;
text-align: center;
position: relative;
}

.calendar-title {
font-size: 24px;
margin-bottom: 5px;
}

.calendar-year-month {
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}

.nav-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
margin: 0 15px;
transition: all 0.3s;
}

.nav-btn:hover {
background: rgba(255, 255, 255, 0.3);
}

.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: #f0f0f0;
padding: 10px 0;
text-align: center;
font-weight: bold;
}

.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: #e0e0e0;
}

.day {
background: white;
min-height: 100px;
padding: 5px;
position: relative;
transition: all 0.3s;
}

.day:hover {
background: #f9f9f9;
}

.day-number {
font-weight: bold;
margin-bottom: 5px;
}

.today .day-number {
background: #2575fc;
color: white;
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
text-align: center;
}

.lunar-day {
font-size: 12px;
color: #888;
}

.festival {
font-size: 12px;
color: #e74c3c;
margin-top: 3px;
}

.solar-term {
font-size: 12px;
color: #2ecc71;
margin-top: 3px;
}

.other-month {
background: #f9f9f9;
color: #aaa;
}

.calendar-footer {
padding: 15px;
text-align: center;
background: #f9f9f9;
border-top: 1px solid #eee;
}

.footer-link {
color: #2575fc;
text-decoration: none;
transition: color 0.3s;
}

.footer-link:hover {
color: #6a11cb;
text-decoration: underline;
}

@media (max-width: 600px) {
.day {
min-height: 70px;
}

.lunar-day, .festival, .solar-term {
font-size: 10px;
}
}
</style>
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">
<div class="calendar-title">万年历</div>
<div class="calendar-year-month">
<button class="nav-btn" id="prev-year">«</button>
<button class="nav-btn" id="prev-month">‹</button>
<span id="current-year-month">2023年11月</span>
<button class="nav-btn" id="next-month">›</button>
<button class="nav-btn" id="next-year">»</button>
</div>
</div>

<div class="calendar-weekdays">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>

<div class="calendar-days" id="calendar-days"></div>

<div class="calendar-footer">
<p>带节日农历的万年历 © <span id="current-year">2023</span></p>
</div>
</div>