Emlog博客龙年过年倒计时代码，支持自定义年份

特点

• 响应式设计，适配手机和电脑端
• 自动补零，显示格式统一（01 天、02 时）
• 倒计时结束后自动显示春节祝福
• 无需额外插件，纯 HTML+JS 实现，加载快速
• 兼容所有 Emlog 版本（包括 5.x、6.x）

<!-- 2026龙年春节倒计时代码 - 适配Emlog侧边栏 --> <div style="background: linear-gradient(135deg, #f0f8fb 0%, #e8f4f8 100%); border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid #d1e7f0;"> <h3 style="color: #165dff; font-size: 18px; margin: 0 0 15px 0; text-align: center; font-weight: 600;"> <i class="fas fa-dragon" style="margin-right: 8px;"></i>2026龙年春节倒计时 </h3> <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px;"> <div style="text-align: center; flex: 1; min-width: 60px;"> <div id="yearDay" style="background: #165dff; color: #fff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px;">00</div> <div style="color: #666; font-size: 14px;">天</div> </div> <div style="text-align: center; flex: 1; min-width: 60px;"> <div id="yearHour" style="background: #4080ff; color: #fff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px;">00</div> <div style="color: #666; font-size: 14px;">时</div> </div> <div style="text-align: center; flex: 1; min-width: 60px;"> <div id="yearMinute" style="background: #f0f8fb; color: #165dff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #d1e7f0;">00</div> <div style="color: #666; font-size: 14px;">分</div> </div> <div style="text-align: center; flex: 1; min-width: 60px;"> <div id="yearSecond" style="background: #f0f8fb; color: #165dff; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #d1e7f0;">00</div> <div style="color: #666; font-size: 14px;">秒</div> </div> </div> <div style="text-align: center; margin-top: 15px; color: #888; font-size: 13px;"> 距离2026年2月17日（正月初一）还有 </div> </div> <script> // 2026年春节目标日期：2026-02-17 00:00:00（正月初一） const targetDate = new Date('2026-02-17 00:00:00').getTime(); // 定时器更新倒计时 const timer = setInterval(() => { const now = new Date().getTime(); const diff = targetDate - now; // 计算天、时、分、秒 const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((diff % (1000 * 60)) / 1000); // 补零处理 const formatNum = (num) => num < 10 ? '0' + num : num; // 更新DOM显示 document.getElementById('yearDay').innerText = formatNum(days); document.getElementById('yearHour').innerText = formatNum(hours); document.getElementById('yearMinute').innerText = formatNum(minutes); document.getElementById('yearSecond').innerText = formatNum(seconds); // 倒计时结束后显示祝福 if (diff <= 0) { clearInterval(timer); document.getElementById('yearDay').innerText = '00'; document.getElementById('yearHour').innerText = '00'; document.getElementById('yearMinute').innerText = '00'; document.getElementById('yearSecond').innerText = '00'; document.querySelector('div[style="text-align: center; margin-top: 15px;"]').innerText = '龙年大吉！万事如意！'; } }, 1000); </script> <!-- 引入龙图标和样式 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* 龙图标动画效果 */ .fa-dragon { color: #ff7d00; animation: dragonBreath 2s infinite alternate; } @keyframes dragonBreath { from { opacity: 0.8; transform: scale(1); } to { opacity: 1; transform: scale(1.2); } } </style>

使用方法（Emlog 后台操作）

1. 登录 Emlog 后台 → 进入「外观」→「侧边栏设置」
2. 找到「添加自定义组件」（或直接编辑现有侧边栏组件）
3. 粘贴上面的完整代码，设置组件标题（如 “春节倒计时”）
4. 点击「保存」，刷新博客前台即可看到效果

修改年份 / 日期：找到代码中 const targetDate = new Date('2025-01-29 00:00:00').getTime();替换 2025-01-29 为目标春节日期（例如 2026 年春节是 2 月 17 日，改为 2026-02-17）