<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节倒计时</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#E63946',
secondary: '#FFB703',
dark: '#1D3557',
light: '#F1FAEE',
festival: '#FF5722', // 新增节日颜色
solar: '#2196F3', // 新增节气颜色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.text-festival {
color: #FF5722;
}
.text-solar {
color: #2196F3;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
<div class="w-full max-w-3xl bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
<!-- 顶部装饰条 -->
<div class="h-2 bg-gradient-to-r from-primary to-secondary"></div>
<!-- 主要内容区 -->
<div class="p-6 md:p-10 text-center">
<h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-dark mb-4">春节倒计时</h1>
<p class="text-gray-600 mb-8 text-[clamp(1rem,2vw,1.2rem)]">距离农历新年还有</p>
<!-- 倒计时显示 -->
<div class="mb-8">
<div id="countdown" class="text-[clamp(3rem,15vw,8rem)] font-black text-primary mb-2 leading-tight text-shadow animate-pulse-slow">
<span id="days">0</span>
</div>
<div class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-6">天</div>
</div>
<!-- 当前日期（包含农历、星期、时钟、节气和节日） -->
<div id="current-date" class="text-gray-500 mb-4 text-[clamp(1rem,2vw,1.2rem)]"></div>
<!-- 节气和节日信息 -->
<div id="solar-festival" class="text-gray-700 mb-8 text-[clamp(1rem,2vw,1.2rem)]"></div>
<!-- 春节信息 -->
<div class="bg-light rounded-xl p-4 mb-6">
<p class="text-gray-700 mb-2">下一个春节是：<span id="next-cny-date" class="font-medium text-dark"></span></p>
<p class="text-gray-700">农历<span id="next-cny-year" class="font-medium text-dark"></span>年正月初一</p>
</div>
<!-- 装饰元素 -->
<div class="flex justify-center space-x-4 mt-8">
<i class="fa-solid fa-firecracker text-secondary text-2xl animate-float" style="animation-delay: 0s"></i>
<i class="fa-solid fa-gift text-secondary text-2xl animate-float" style="animation-delay: 0.5s"></i>
<i class="fa-solid fa-calendar-check text-secondary text-2xl animate-float" style="animation-delay: 1s"></i>
</div>
</div>
<!-- 底部 -->
<div class="bg-dark text-white p-4 text-center text-sm">
<p>愿新年，胜旧年 <i class="fa-solid fa-heart text-primary ml-1"></i></p>
</div>
</div>
<script>
// 农历月份名称
const lunarMonths = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
// 农历日期名称
const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
'廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
// 星期名称
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
// 24节气名称
const solarTerms = [
'立春', '雨水', '惊蛰', '春分', '清明', '谷雨',
'立夏', '小满', '芒种', '夏至', '小暑', '大暑',
'立秋', '处暑', '白露', '秋分', '寒露', '霜降',
'立冬', '小雪', '大雪', '冬至', '小寒', '大寒'
];
// 2024-2025年节气数据（公历日期）
const solarTermData = {
2024: [
[2, 4], [2, 19], [3, 5], [3, 20], [4, 4], [4, 20],
[5, 5], [5, 21], [6, 6], [6, 21], [7, 7], [7, 23],
[8, 7], [8, 23], [9, 8], [9, 23], [10, 8], [10, 24],
[11, 7], [11, 22], [12, 7], [12, 22], [1, 6], [1, 20]
],
2025: [
[2, 3], [2, 18], [3, 5], [3, 20], [4, 4], [4, 19],
[5, 5], [5, 21], [6, 5], [6, 21], [7, 6], [7, 22],
[8, 7], [8, 23], [9, 7], [9, 23], [10, 8], [10, 23],
[11, 7], [11, 22], [12, 7], [12, 21], [1, 5], [1, 20]
]
};
// 中国传统节日数据（农历日期）
const festivals = {
'1-1': { name: '春节', importance: 1 },
'1-15': { name: '元宵节', importance: 2 },
'5-5': { name: '端午节', importance: 2 },
'7-7': { name: '七夕节', importance: 3 },
'8-15': { name: '中秋节', importance: 1 },
'9-9': { name: '重阳节', importance: 2 },
'12-8': { name: '腊八节', importance: 3 },
'12-23': { name: '小年', importance: 3 }
};
// 农历数据（简化版，仅包含2024-2025年部分数据）
const lunarData = {
2024: {
startMonth: 2, // 春节所在公历月份 (2月)
startDay: 10, // 春节所在公历日期 (10日)
months: [30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30] // 各农历月天数
},
2025: {
startMonth: 1, // 春节所在公历月份 (1月)
startDay: 29, // 春节所在公历日期 (29日)
months: [29, 30, 29, 30, 29, 30, 29, 30, 30, 29, 30, 29] // 各农历月天数
}
};
// 计算春节日期的函数
function calculateChineseNewYear(currentYear) {
// 这里使用简化的算法，实际春节日期需要更复杂的农历计算
// 以下数据是2024-2030年的春节日期，实际应用中可能需要更完善的农历算法
const springFestivalDates = {
2024: new Date(2024, 1, 10), // 2024年2月10日
2025: new Date(2025, 0, 29), // 2025年1月29日
2026: new Date(2026, 1, 17), // 2026年2月17日
2027: new Date(2027, 1, 6), // 2027年2月6日
2028: new Date(2028, 1, 25), // 2028年2月25日
2029: new Date(2029, 1, 13), // 2029年2月13日
2030: new Date(2030, 2, 3) // 2030年3月3日
};
const currentDate = new Date();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
// 确定使用哪一年的春节日期
let targetYear = currentYear;
if (currentMonth > 1 || (currentMonth === 1 && currentDay > 20)) {
targetYear = currentYear + 1;
}
// 如果不在预定义范围内，使用一个估计值（实际应用中需要更完善的算法）
if (!springFestivalDates[targetYear]) {
// 估计值：假设春节在2月1日左右
return {
date: new Date(targetYear, 1, 1),
yearName: '未知'
};
}
// 生肖年份
const zodiacYears = ['龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔'];
const startYear = 2024; // 2024年是龙年
const offset = (targetYear - startYear) % 12;
const zodiacIndex = offset >= 0 ? offset : offset + 12;
const yearName = zodiacYears[zodiacIndex];
return {
date: springFestivalDates[targetYear],
yearName: yearName
};
}
// 计算农历日期（简化版，仅适用于2024-2025年）
function calculateLunarDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1; // 公历月份 (1-12)
const day = date.getDate(); // 公历日期
// 仅处理2024-2025年的数据
if (!lunarData[year]) {
return {
lunarDate: "未知",
lunarMonth: 0,
lunarDay: 0
};
}
const lunarInfo = lunarData[year];
const springFestival = new Date(year, lunarInfo.startMonth - 1, lunarInfo.startDay);
const daysFromSpringFestival = Math.floor((date - springFestival) / (1000 * 60 * 60 * 24));
// 如果日期在春节之前，计算上一年的农历日期
if (daysFromSpringFestival < 0) {
const prevYear = year - 1;
if (!lunarData[prevYear]) {
return {
lunarDate: "未知",
lunarMonth: 0,
lunarDay: 0
};
}
const prevYearInfo = lunarData[prevYear];
const prevYearSpringFestival = new Date(prevYear, prevYearInfo.startMonth - 1, prevYearInfo.startDay);
const daysFromPrevSpringFestival = Math.floor((date - prevYearSpringFestival) / (1000 * 60 * 60 * 24));
let lunarMonth = 0;
let lunarDay = 0;
let daysLeft = daysFromPrevSpringFestival;
// 计算农历月份和日期
for (let i = 0; i < 12; i++) {
if (daysLeft < prevYearInfo.months[i]) {
lunarMonth = i + 1;
lunarDay = daysLeft + 1;
break;
}
daysLeft -= prevYearInfo.months[i];
}
return {
lunarDate: `农历${lunarMonths[lunarMonth - 1]}月${lunarDays[lunarDay - 1]}`,
lunarMonth: lunarMonth,
lunarDay: lunarDay
};
}
// 如果日期在春节之后
else {
let lunarMonth = 0;
let lunarDay = 0;
let daysLeft = daysFromSpringFestival;
// 计算农历月份和日期
for (let i = 0; i < 12; i++) {
if (daysLeft < lunarInfo.months[i]) {
lunarMonth = i + 1;
lunarDay = daysLeft + 1;
break;
}
daysLeft -= lunarInfo.months[i];
}
return {
lunarDate: `农历${lunarMonths[lunarMonth - 1]}月${lunarDays[lunarDay - 1]}`,
lunarMonth: lunarMonth,
lunarDay: lunarDay
};
}
}
// 检查是否为节气
function checkSolarTerm(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
if (!solarTermData[year]) return null;
for (let i = 0; i < solarTermData[year].length; i++) {
const [termMonth, termDay] = solarTermData[year][i];
if (month === termMonth && day === termDay) {
return solarTerms[i];
}
}
return null;
}
// 检查是否为节日
function checkFestival(lunarMonth, lunarDay) {
const key = `${lunarMonth}-${lunarDay}`;
return festivals[key] || null;
}
// 更新倒计时
function updateCountdown() {
const now = new Date();
const currentYear = now.getFullYear();
// 获取下一个春节的日期
const nextCny = calculateChineseNewYear(currentYear);
// 计算剩余天数
const timeDiff = nextCny.date - now;
const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
// 计算农历日期
const lunarInfo = calculateLunarDate(now);
// 获取星期和时间
const weekDay = `星期${weekDays[now.getDay()]}`;
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeStr = `${hours}:${minutes}:${seconds}`;
// 检查是否为节气
const solarTerm = checkSolarTerm(now);
// 检查是否为节日
const festival = checkFestival(lunarInfo.lunarMonth, lunarInfo.lunarDay);
// 更新DOM
document.getElementById('days').textContent = daysLeft;
document.getElementById('current-date').textContent =
`今天是 ${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekDay} · ${lunarInfo.lunarDate} ${timeStr}`;
document.getElementById('next-cny-date').textContent =
`${nextCny.date.getFullYear()}年${nextCny.date.getMonth() + 1}月${nextCny.date.getDate()}日`;
document.getElementById('next-cny-year').textContent = nextCny.yearName;
// 更新节气和节日信息
let solarFestivalHTML = '';
if (solarTerm) {
solarFestivalHTML += `<span class="text-solar"><i class="fa-solid fa-sun mr-1"></i>${solarTerm}</span>`;
}
if (festival) {
if (solarFestivalHTML) solarFestivalHTML += ' · ';
const importanceClass = festival.importance === 1 ? 'font-bold' : '';
solarFestivalHTML += `<span class="text-festival ${importanceClass}"><i class="fa-solid fa-calendar-check mr-1"></i>${festival.name}</span>`;
}
document.getElementById('solar-festival').innerHTML = solarFestivalHTML;
}
// 初始化
updateCountdown();
// 每秒更新时间
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
浙公网安备 33010602011771号