
2026年也到了,快给你的子比主题添加一个新年倒计时吧,代码可以自定义修改倒计时时间,如果有条件的可以自己diy
使用教程
将如下代码添加的WP后台 – 外观 – 小工具中找到文章页-侧边栏添加自定义HTML代码即可
/*米饭博客nlmca.cn*/
<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="fa-solid fa-horse" 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-horse {
color: #ff7d00;
animation: horseBreath 2s infinite alternate;
}
@keyframes horseBreath {
from { opacity: 0.8; transform: scale(1); }
to { opacity: 1; transform: scale(1.2); }
}
</style>

微信扫一扫
支付宝扫一扫 