使用jquery lunarjs 库写一个完整的春节倒计时网页版本

封面图 • 2025-11-23 • jQuery

下面是一个使用 **jQuery** 和 **LunarJS** 库实现的**春节倒计时网页版本**。这个示例将显示距离下一个春节还有多少天、小时、分钟和秒。

---

## ✅ 功能说明

- 使用 **LunarJS** 计算农历（阴历）日期。
- 使用 **jQuery** 操作 DOM。
- 显示距离下一个春节的倒计时（天、小时、分钟、秒）。

---

## 🧾 1. 引入依赖库

你需要引入以下资源：

- [jQuery](https://code.jquery.com/jquery-3.6.0.min.js)
- [LunarJS](https://github.com/zhaojia/LunarJS)

```html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lunarjs@1.0.12/dist/lunar.min.js"></script>
```

---

## 🧩 2. HTML 页面结构

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>春节倒计时</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 100px;
            background-color: #f5f5f5;
        }
        .countdown {
            font-size: 2em;
            color: #333;
        }
    </style>
</head>
<body>

<h1>🎉 春节倒计时</h1>
    <div class="countdown" id="countdown">正在计算中...</div>

// 找到下一个春节（农历正月初一）
        function getNextSpringFestival(year) {
            // 从当前年份开始找，直到找到一个春节
            for (let y = year; y <= year + 10; y++) {
                const lunarDate = new Lunar().lunarToSolar(y, 1, 1);
                const solarDate = new Date(lunarDate.year, lunarDate.month - 1, lunarDate.day);
                if (solarDate.getFullYear() === y) {
                    return solarDate;
                }
            }
            return new Date(); // 默认返回当前时间
        }

// 计算倒计时
        function updateCountdown() {
            const now = new Date();
            const nextSpringFestival = getNextSpringFestival(currentYear);

const diff = nextSpringFestival - now;

if (diff <= 0) {
                $('#countdown').text("🎉 春节已经到了！");
                return;
            }

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
            const minutes = Math.floor((diff / (1000 * 60)) % 60);
            const seconds = Math.floor((diff / 1000) % 60);

$('#countdown').text(
                `距离春节还有：${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`
            );
        }

// 每秒更新一次倒计时
        setInterval(updateCountdown, 1000);
        updateCountdown(); // 初始调用
    </script>

</body>
</html>
```

---

## 📌 说明

- `getNextSpringFestival()` 函数通过 LunarJS 将农历正月初一转换为公历日期。
- `updateCountdown()` 计算当前时间与春节之间的差值，并更新页面。
- 倒计时每秒更新一次。

---

## 🚀 可选扩展

你可以进一步优化这个页面，例如：

- 添加动画效果
- 支持多语言（如英文、日文等）
- 在春节当天显示祝福语或图片

---

如果你需要我帮你打包成一个完整的可运行文件或添加更多功能，请告诉我！