精品源码 · 亲测源码

一个轻量级网页节日漂浮挂件。引入后会自动悬浮在页面右下角，按系统日期自动显示对应的节日祝福卡片，节日过后自动隐藏，不需要手动维护。
适用于任何网页

🎈 功能特点

• 覆盖 2026-2028 全部法定节假日
• 支持元旦、春节、清明、劳动节、端午、中秋、国庆
• 右下角自动悬浮显示
• 多个节日自动堆叠，不会互相遮挡
• 金色描边 + 悬浮动画 + 星光闪烁效果
• 右上角 × 可手动关闭
• 纯原生 JS，单文件，无依赖
• 支持模拟日期调试，方便预览效果

🗓️ 已覆盖节日

说明：2026 年按官方放假调休方案配置。2027、2028 年官方调休通知暂未发布，目前按法定假日日期配置，后续官方通知出来后可以再更新。

📖 使用教程第一步：上传脚本下载 festival-widget.js，上传到你的网站目录。
第二步：引入页面在需要显示挂件的页面底部，</body> 之前加入：
<script src="festival-widget.js"></script>第三步：刷新生效刷新页面后，挂件会自动出现在右下角。不需要额外初始化代码。

🎛️ 调试方法可以在浏览器控制台手动测试：
// 强制显示全部节日window.__festival.setState({ testMode: true });// 恢复正常模式window.__festival.setState({ testMode: false });// 模拟某一天window.__festival.setState({ simulate: "2028-1-26" });// 恢复真实日期window.__festival.setState({ simulate: null });

📝 自定义节日打开 festival-widget.js，找到 festivalConfig，可以按格式修改或新增节日。
示例：
{  name: "y2028_chunjie",  year: 2028,  from: { m: 1, d: 25 },  to: { m: 1, d: 28 },  title: "欢度春节",  text: "祝福语<br>第二行",  gradient: "linear-gradient(135deg,#b40000,#e21515)"}

 

💡 注意事项

• 正式上线前，确认脚本中 testMode 为 false
• 挂件不影响页面原有布局
• 删除引入代码即可卸载
• 后续官方调休通知发布后，可以一键更新节日日期范围