handsome主题添加首页新年倒计时

xuan

2025 年 10 月 18 日

454 次浏览

4 条评论

4530字数

网站优化

AI摘要

在handsome主题的首页添加春节倒计时功能，包括响应式和夜间模式适配。

此内容根据文章生成，仅用于文章内容的解释与总结

给handsome主题的首页加一个倒计时，我设置的是春节倒计时，需要其他标题可自行修改代码。

效果见本博客首页，已支持响应式和夜间模式。

在handsome主题后台->开发者设置->`首页列表最前方广告位`中添加下面的代码。

代码如下：
[hide]
```
<style>
    /* 倒计时容器样式 */
    .gn_box {
        padding: 20px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #e3e8f7;
        border-radius: 15px;
        box-shadow: 0 8px 16px -4px rgba(44, 45, 48, 0.047);
        transition: all 0.3s ease;
    }

/* 标题样式 */
    .gn_box h1 {
        margin: 10px 0 20px;
        font-size: 28px;
        font-weight: bold;
        color: #465CEB;
    }

/* 倒计时容器 */
    .HotDate {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

/* 倒计时数字通用样式 */
    .HotDate span {
        font-size: 20px;
        font-weight: 600;
        padding: 10px 15px;
        border-radius: 8px;
        background-color: rgba(70, 92, 235, 0.08);
        border: 1px solid rgba(70, 92, 235, 0.15);
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

.HotDate span:hover {
        transform: scale(1.05);
        background-color: rgba(70, 92, 235, 0.12);
    }

#t_d {
        color: #982585;
    }

#t_h {
        color: #8f79c1;
    }

#t_m {
        color: #65b4b5;
    }

#t_s {
        color: #83caa3;
        animation: pulse 1s infinite;
    }

/* 秒数脉冲动画 */
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }

/* 响应式设计 */
    @media (max-width: 600px) {
        .gn_box h1 {
            font-size: 22px;
        }
        
        .HotDate span {
            font-size: 16px;
            padding: 8px 12px;
        }
    }

/* 暗色模式适配 - 倒计时容器 */
    [data-night="night"] .gn_box,
    .dark-mode .gn_box,
    body.dark .gn_box,
    body.night .gn_box,
    .night .gn_box,
    .night-mode .gn_box,
    html.night .gn_box,
    .theme-dark .gn_box {
        background-color: #2c2c2e;
        border-color: #4a4a4a;
        box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
    }

/* 暗色模式适配 - 标题 */
    [data-night="night"] .gn_box h1,
    .dark-mode .gn_box h1,
    body.dark .gn_box h1,
    body.night .gn_box h1,
    .night .gn_box h1,
    .night-mode .gn_box h1,
    html.night .gn_box h1,
    .theme-dark .gn_box h1 {
        color: #7c89f1;
    }

/* 暗色模式适配 - 倒计时数字 */
    [data-night="night"] .HotDate span,
    .dark-mode .HotDate span,
    body.dark .HotDate span,
    body.night .HotDate span,
    .night .HotDate span,
    .night-mode .HotDate span,
    html.night .HotDate span,
    .theme-dark .HotDate span {
        background-color: rgba(124, 137, 241, 0.15);
        border-color: rgba(124, 137, 241, 0.25);
    }

[data-night="night"] .HotDate span:hover,
    .dark-mode .HotDate span:hover,
    body.dark .HotDate span:hover,
    body.night .HotDate span:hover,
    .night .HotDate span:hover,
    .night-mode .HotDate span:hover,
    html.night .HotDate span:hover,
    .theme-dark .HotDate span:hover {
        background-color: rgba(124, 137, 241, 0.2);
    }

/* 暗色模式适配 - 各时间单位颜色 */
    [data-night="night"] #t_d,
    .dark-mode #t_d,
    body.dark #t_d,
    body.night #t_d,
    .night #t_d,
    .night-mode #t_d,
    html.night #t_d,
    .theme-dark #t_d {
        color: #e94ca6;
    }

[data-night="night"] #t_h,
    .dark-mode #t_h,
    body.dark #t_h,
    body.night #t_h,
    .night #t_h,
    .night-mode #t_h,
    html.night #t_h,
    .theme-dark #t_h {
        color: #b89ce2;
    }

[data-night="night"] #t_m,
    .dark-mode #t_m,
    body.dark #t_m,
    body.night #t_m,
    .night #t_m,
    .night-mode #t_m,
    html.night #t_m,
    .theme-dark #t_m {
        color: #87d4d5;
    }

[data-night="night"] #t_s,
    .dark-mode #t_s,
    body.dark #t_s,
    body.night #t_s,
    .night #t_s,
    .night-mode #t_s,
    html.night #t_s,
    .theme-dark #t_s {
        color: #a8e9c3;
    }
</style>

<div class="gn_box">
    <h1>2026年 - 春节倒计时</h1>
    <div id="CountMsg" class="HotDate">
        <span id="t_d">-- 天</span>
        <span id="t_h">-- 时</span>
        <span id="t_m">-- 分</span>
        <span id="t_s">-- 秒</span>
    </div>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2026/02/17 00:00:00');
            var NowTime = new Date();
            var t = EndTime.getTime() - NowTime.getTime();
            
            if (t <= 0) {
                document.getElementById('t_d').innerHTML = '0 天';
                document.getElementById('t_h').innerHTML = '0 时';
                document.getElementById('t_m').innerHTML = '0 分';
                document.getElementById('t_s').innerHTML = '0 秒';
                return;
            }
            
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            
            document.getElementById('t_d').innerHTML = d + ' 天';
            document.getElementById('t_h').innerHTML = h + ' 时';
            document.getElementById('t_m').innerHTML = m + ' 分';
            document.getElementById('t_s').innerHTML = s + ' 秒';
        }
        
        getRTime();
        setInterval(getRTime, 1000);
    </script>
</div>
```
[/hide]

给handsome主题的首页加一个倒计时，我设置的是春节倒计时，需要其他标题可自行修改代码。

效果见本博客首页，已支持响应式和夜间模式。

在handsome主题后台->开发者设置->首页列表最前方广告位中添加下面的代码。

代码如下：

此处内容需要评论回复后（审核通过）方可阅读。

最后修改：2025 年 10 月 18 日

如果觉得我的文章对你有用，请随意赞赏

END

本文作者： xuan
文章标题：handsome主题添加首页新年倒计时
本文地址：https://blog.ybyq.wang/archives/1229.html
版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

语录

私密评论

名称 *

🎲

邮箱 *

地址

Hary Android Safari 537.36 中国安徽省合肥市蜀山区联通
October 19th, 2025 at 03:28 pm

哈哈，这么早，都准备过春节啦

回复
acevs Windows 10 Safari 537.36 中国山东省青岛市联通
October 19th, 2025 at 02:59 pm

我以为元旦。哈哈。

回复
皮皮社长 vivo Safari 537.36 中国湖南省永州市道县联通
October 19th, 2025 at 02:08 am

就为过年做准备了，太早了点吧，我钱还没存到几块呢。😐

回复
1. xuan Windows 10 Safari 537.36 中国福建省厦门市电信
  October 19th, 2025 at 11:05 am
  
  @皮皮社长
  
  还有四个月
  
  回复