功能介绍

恋爱块是 Handsome 主题侧边栏中的一个温馨小组件，用于展示情侣之间的相处时间。它包含两个头像、一个跳动的心形图标，以及实时更新的相处时长计时器。
效果图

组件位置

文件路径：/usr/themes/handsome/component/sidebar.php，放在sidebar块中，广告位置之前。
位置

参数修改方法

1. 修改头像

位置：找到以下两行代码

<!-- 第一个头像 -->
<img src="https://q2.qlogo.cn/g?b=qq&nk=676567473&s=640" ...>

<!-- 第二个头像 -->
<img src="https://q2.qlogo.cn/g?b=qq&nk=2268697328&s=640" ...>

修改方法：将 nk= 后面的数字替换为你们的 QQ 号码

获取 QQ 头像 URL 的方法：

  • 打开 https://q2.qlogo.cn/g?b=qq&nk=你的QQ号&s=640
  • 将 你的QQ号 替换为实际的 QQ 号码
  • s=640 表示头像大小为 640×640 像素

2. 修改初始时间

位置：找到以下代码行

var create_time = Math.round(new Date(Date.UTC(2025, 03, 17, 0, 0, 0)).getTime() / 1000);

参数说明：

参数含义范围
2025年份任意年份
03月份0-11（0=1月, 11=12月）
17日期1-31
0小时0-23
0分钟0-59
0秒钟0-59

修改示例：

改成 2024 年 5 月 20 日 14:30:00

var create_time = Math.round(new Date(Date.UTC(2024, 04, 20, 14, 30, 0)).getTime() / 1000);

⚠️ 注意：月份是从 0 开始计数的

  • 1月 = 0
  • 2月 = 1
  • 3月 = 2
  • ...
  • 12月 = 11

3. 修改跳转链接

位置：找到以下代码（出现两次）

<a href="https://xuanxi.love/" target="_blank" ...>

修改方法：将 https://xuanxi.love/ 替换为你想要的链接

示例：

<!-- 改成你的网站 -->
<a href="https://yourwebsite.com/" target="_blank" ...>

<!-- 改成微博 -->
<a href="https://weibo.com/yourprofile" target="_blank" ...>

<!-- 改成抖音 -->
<a href="https://www.douyin.com/user/youruid" target="_blank" ...>

4. 调整动画速度

位置：找到以下代码

<div id="couple_heart" style="... animation: heartBeat 2s ease-in-out infinite;">

修改方法：改变 2s 的值

时间效果
1.2s较快（每秒跳动 0.6 次）
1.8s中等
2s较慢（默认）
2.4s更慢
3s非常慢

示例：

<!-- 改成 1.5 秒 -->
<div id="couple_heart" style="... animation: heartBeat 1.5s ease-in-out infinite;">

5. 修改标题文本

位置：找到以下代码

<?php _me("恋爱") ?>

修改方法：改变引号内的文本

示例：

<?php _me("我们的故事") ?>
<?php _me("Love") ?>

6. 修改头像大小

位置：找到以下代码（两个头像都有）

<img src="..." style="width: 50px; height: 50px; ...">

修改方法：改变 width 和 height 的值

示例：

<!-- 改成 60×60 -->
<img src="..." style="width: 60px; height: 60px; ...">

<!-- 改成 40×40 -->
<img src="..." style="width: 40px; height: 40px; ...">

7. 修改 SVG 心形文件

位置：找到以下代码

<img src="https://yoursite.com/path/to/your/heart.svg"
    style="width: 35px; height: 35px; display: inline-block; vertical-align: middle; margin: 0 8px 8px; animation: heartBeat 2s ease-in-out infinite;">

修改方法：将 src 属性中的 URL 替换为你的 SVG 文件地址

示例：

<!-- 改成你的 SVG 文件地址 -->
<img src="https://yourdomain.com/images/heart.svg" ...>

<!-- 改成本地路径 -->
<img src="/usr/themes/handsome/assets/img/love_svg/heart.svg" ...>

<!-- 改成 CDN 地址 -->
<img src="https://cdn.example.com/heart.svg" ...>

如何获取 SVG 文件地址：

  1. 将你的 SVG 文件上传到服务器或 CDN
  2. 获取文件的完整 URL
  3. 将 URL 替换到 src 属性中

SVG 文件要求：

  • 格式：.svg 文件
  • 大小：建议 35×35 像素或更大（会自动缩放）
  • 颜色：支持任何颜色，建议与主题配色一致

8. 修改心形大小

位置：找到以下代码

<img src="..." style="width: 35px; height: 35px; ...">

修改方法：改变 width 和 height 的值

示例：

<!-- 改成 40×40 -->
<img src="..." style="width: 40px; height: 40px; ...">

<!-- 改成 30×30 -->
<img src="..." style="width: 30px; height: 30px; ...">

9. 修改时间显示格式

位置：找到以下代码

currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">一起走过</span><br>' +
    currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时';

修改方法：改变字符串内容

示例：

// 显示完整时间（包括分钟）
currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">一起走过</span><br>' +
    currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时 ' + currentTime[3] + '分';

// 只显示天数
currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">相处</span><br>' +
    currentTime[1] + ' 天';

// 英文显示
currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">Together for</span><br>' +
    currentTime[0] + ' years ' + currentTime[1] + ' days';

代码

基础版

<!-- 恋爱模块 -->
<section id="couple_time_widget" class="widget widget_categories wrapper-md padder-v-none clear">
    <h5 class="widget-title m-t-none"><i data-feather="heart" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: #e74c3c;"></i><?php _me("恋爱") ?></h5>
    <div class="panel wrapper-sm padder-v-ssm">
        <div style="text-align: center; padding: 8px 0;">
            <img src="https://q2.qlogo.cn/g?b=qq&nk=222222222&s=640"
                style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff;">
            <img src="https://yoursite.com/path/to/your/heart.svg"
                style="width: 35px; height: 35px; display: inline-block; vertical-align: middle; margin: 0 8px 8px; animation: heartBeat 2s ease-in-out infinite;">
            <img src="https://q2.qlogo.cn/g?b=qq&nk=1111111111&s=640"
                style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-left: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff;">
            <br>
            <span id="htmer_time" style="display: block; margin-top: 0px; font-size: 13px; color: #666; line-height: 1.6;">
                <span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;"></span>
            </span>
        </div>
    </div>
    <style>
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.15); }
            50% { transform: scale(1); }
            75% { transform: scale(1.15); }
        }
    </style>
    <script type="text/javascript">
        function setTime() {
            var create_time = Math.round(new Date(Date.UTC(2025, 03, 17, 0, 0, 0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">一起走过</span><br>' +
                currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时';
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) return 0;
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) time[4] = second;
            return time;
        }
        setInterval(setTime, 1000);
        document.addEventListener('DOMContentLoaded', setTime);
    </script>
</section>

SVG 文件引入版（推荐）

<!-- 恋爱模块 -->
<section id="couple_time_widget" class="widget widget_categories wrapper-md padder-v-none clear">
    <h5 class="widget-title m-t-none"><i data-feather="heart" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: #e74c3c;"></i><?php _me("恋爱") ?></h5>
    <div class="panel wrapper-sm padder-v-ssm">
        <div style="text-align: center; padding: 8px 0;">
            <a href="https://xuanxi.love/" target="_blank" style="display: inline-block; text-decoration: none;">
                <img src="https://q2.qlogo.cn/g?b=qq&nk=222222222&s=640"
                    style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff; cursor: pointer; transition: transform 0.3s ease;"
                    onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
            </a>
            <img src="https://yoursite.com/path/to/your/heart.svg"
                style="width: 35px; height: 35px; display: inline-block; vertical-align: middle; margin: 0 8px 8px; animation: heartBeat 2s ease-in-out infinite;">
            <a href="https://xuanxi.love/" target="_blank" style="display: inline-block; text-decoration: none;">
                <img src="https://q2.qlogo.cn/g?b=qq&nk=1111111111&s=640"
                    style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-left: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff; cursor: pointer; transition: transform 0.3s ease;"
                    onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
            </a>
            <br>
            <span id="htmer_time" style="display: block; margin-top: 0px; font-size: 13px; color: #666; line-height: 1.6;">
                <span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;"></span>
            </span>
        </div>
    </div>
    <style>
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.15); }
            50% { transform: scale(1); }
            75% { transform: scale(1.15); }
        }
    </style>
    <script type="text/javascript">
        function setTime() {
            var create_time = Math.round(new Date(Date.UTC(2025, 03, 17, 0, 0, 0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">一起走过</span><br>' +
                currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时';
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) return 0;
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) time[4] = second;
            return time;
        }
        setInterval(setTime, 1000);
        document.addEventListener('DOMContentLoaded', setTime);
    </script>
</section>

SVG 内嵌代码版（完整版）

<!-- 恋爱模块 -->
<section id="couple_time_widget" class="widget widget_categories wrapper-md padder-v-none clear">
    <h5 class="widget-title m-t-none"><i data-feather="heart" style="width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: #e74c3c;"></i><?php _me("恋爱") ?></h5>
    <div class="panel wrapper-sm padder-v-ssm">
        <div style="text-align: center; padding: 8px 0;">
            <a href="https://xuanxi.love/" target="_blank" style="display: inline-block; text-decoration: none;">
                <img src="https://q2.qlogo.cn/g?b=qq&nk=222222222&s=640"
                    style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-right: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff; cursor: pointer; transition: transform 0.3s ease;"
                    onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
            </a>
            <div id="couple_heart" style="display: inline-block; vertical-align: middle; margin: 0 8px 8px; animation: heartBeat 2s ease-in-out infinite;">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 35px; height: 35px;">
                    <path d="M5.1 831.1h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H5.1c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.3 0h55.8c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z m106.5 0h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H425.9c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.4 0H796c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.4 5.1 5.2 5.1z m106.4 0h172.4c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H846.7c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z" fill="#3B0404"></path>
                    <path d="M409.6 803.5H86.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h118.2c-10.1-3.4-17.3-12.9-17.3-24 0-10.9 6.8-20.1 16.4-23.7h-73.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h130.1l-40.8-40.8-1.8-1.8c-88.1-88.1-88.1-231 0-319.1s231-88.1 319.1 0l1.8 1.8 1.8-1.8c88.1-88.1 231-88.1 319.1 0 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0L409.6 803.5zM54.5 753.1c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4s25.4 11.4 25.4 25.4c0 14.1-11.4 25.4-25.4 25.4z" fill="#FF5E5E"></path>
                    <path d="M668.1 228.8c67.9-9.7 139.3 11.6 191.5 63.8 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0l-5.1-5.1 291.3-291.4 1.8-1.8c88.1-88.1 88.1-231 0-319.1-38.3-38.2-87-59.9-137.1-64.8z" fill="#CB2828"></path>
                    <path d="M196 633.3c2 2 2 5.2 0 7.2s-5.2 2-7.2 0L165.3 617l-1-1-0.3-0.3-0.5-0.5c-54.3-54.3-77.4-130.8-63.8-204.9 0.5-2.8 3.1-4.6 5.9-4.1 2.8 0.5 4.6 3.1 4.1 5.9-13 70.9 9.1 144 61 195.9l0.5 0.5 0.3 0.3 1.1 1.1 23.4 23.4z m-85.3-226c-0.6 2.7-3.2 4.5-6 3.9-2.7-0.6-4.5-3.2-3.9-6 0.3-1.7 0.7-3.4 1.1-5.1 0.6-2.7 3.3-4.4 6.1-3.8 2.7 0.6 4.4 3.3 3.8 6.1-0.4 1.6-0.7 3.3-1.1 4.9z m17.4-51.2c-1.2 2.5-4.3 3.6-6.8 2.4s-3.6-4.3-2.4-6.8c11.1-23 26-44 44.5-62.5 44.3-44.3 103.3-68.1 164.6-67.7 2.8 0 5.1 2.3 5 5.1 0 2.8-2.3 5.1-5.1 5-58.6-0.3-115 22.4-157.4 64.7-17.5 17.7-31.8 37.8-42.4 59.8zM333 231.7c-2.8-0.1-5-2.4-4.9-5.2 0.1-2.8 2.4-5 5.2-4.9 1.7 0 3.5 0.1 5.2 0.2 2.8 0.1 4.9 2.5 4.8 5.3-0.1 2.8-2.5 4.9-5.3 4.8-1.7-0.1-3.4-0.2-5-0.2z m272.4-6c2.7-0.5 5.4 1.3 5.9 4s-1.3 5.4-4 5.9c-42.8 8.3-82.3 29-113.9 60.6l-0.4 0.4-1.5 1.5c-2 2-5.2 2-7.2-0.1-0.6-0.6-1.2-1.2-1.7-1.8-26.9-26.9-59.7-46-95.5-56.2-2.7-0.8-4.3-3.6-3.5-6.3 0.8-2.7 3.6-4.3 6.3-3.5 36.7 10.4 70.3 29.8 98.2 57 32.6-31.9 73.2-53 117.3-61.5z m6.6 9c-2.8 0.5-5.4-1.4-5.9-4.1-0.5-2.8 1.4-5.4 4.1-5.9 1.7-0.3 3.4-0.6 5.1-0.8 2.8-0.4 5.3 1.5 5.8 4.3 0.4 2.8-1.5 5.3-4.3 5.8-1.5 0.2-3.2 0.5-4.8 0.7z m54.6-2.5c-2.8-0.2-4.9-2.7-4.7-5.4 0.2-2.8 2.7-4.9 5.4-4.7 54.4 4.2 105.7 27.5 145.1 66.9 23.1 23.1 40.7 50.3 52.2 80.2 1 2.6-0.3 5.5-2.9 6.6-2.6 1-5.5-0.3-6.6-2.9-11-28.5-27.8-54.6-49.9-76.7-37.6-37.7-86.6-59.9-138.6-64zM857 377.5c-0.9-2.6 0.4-5.5 3.1-6.5 2.6-0.9 5.5 0.4 6.5 3.1 0.6 1.6 1.1 3.3 1.7 4.9 0.9 2.7-0.6 5.5-3.2 6.4-2.7 0.9-5.5-0.6-6.4-3.2-0.6-1.6-1.2-3.1-1.7-4.7z m11.9 53.1c-0.3-2.8 1.8-5.3 4.6-5.5 2.8-0.3 5.3 1.8 5.5 4.6 6.7 68.3-17 136.2-66.5 185.7l-1.8 1.8-36.8 36.8c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l36.8-36.8c0.6-0.6 1.2-1.2 1.8-1.7 47.3-47.5 69.9-112.5 63.6-177.7zM763.1 650.2c2-2 5.2-2 7.2 0s2 5.2 0 7.2l-3.6 3.6c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l3.6-3.6z m-39.4 39.5c2-2 5.2-2 7.2 0s2 5.2 0 7.2L551.6 876.1c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l179.3-179.2zM540.9 872.5c2-2 5.2-2 7.2 0s2 5.2 0 7.2l-3.6 3.6c-2 2-5.2 2-7.2 0s-2-5.2 0-7.2l3.6-3.6z m-39.1 38.3c-9.8 6.4-22.9 5.2-31.4-3.1L367.8 805.1c-2-2-5.2-2-7.2 0s-2 5.2 0 7.2L463.3 915c12 11.6 30.3 13.3 44.1 4.4 2.3-1.5 3-4.7 1.5-7-1.6-2.4-4.7-3.1-7.1-1.6z" fill="#3B0404"></path>
                    <path d="M494.3 514.2c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.2-15.2 15.2z m91.3 0c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2 15.2 6.8 15.2 15.2-6.8 15.2-15.2 15.2zM465.1 583.3c18.7 22.9 46.6 36.5 76.7 36.5 29.2 0 56.3-12.7 74.9-34.4 1.8-2.1 1.6-5.3-0.5-7.2-2.1-1.8-5.3-1.6-7.2 0.5-16.8 19.5-41.1 30.9-67.3 30.9-27 0-52.1-12.2-68.8-32.7-1.8-2.2-5-2.5-7.1-0.7s-2.5 5-0.7 7.1z" fill="#3B0404"></path>
                    <path d="M428.4 559.9c-8.4 0-15.2-6.8-15.2-15.2 0-8.4 6.8-15.2 15.2-15.2 8.4 0 15.2 6.8 15.2 15.2 0 8.4-6.8 15.2-15.2 15.2z m223.1 0c-8.4 0-15.2-6.8-15.2-15.2 0-8.4 6.8-15.2 15.2-15.2s15.2 6.8 15.2 15.2c0 8.4-6.8 15.2-15.2 15.2z" fill="#CB2828"></path>
                    <path d="M332.1 483.8c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z m415.8 0c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z" fill="#F54040"></path>
                    <path d="M871.4 125.7v-0.3c0-14.9 12.1-26.9 26.9-26.9s26.9 12.1 26.9 26.9V160.6c0 10.5-8.5 19-19 19H871c-14.9 0-26.9-12.1-26.9-26.9s12.1-26.9 26.9-26.9c0.2-0.1 0.3-0.1 0.4-0.1z" fill="#FF5E5E"></path>
                </svg>
            </div>
            <a href="https://xuanxi.love/" target="_blank" style="display: inline-block; text-decoration: none;">
                <img src="https://q2.qlogo.cn/g?b=qq&nk=1111111111&s=640"
                    style="width: 50px; height: 50px; vertical-align: -20px; border-radius: 50%; margin-left: 5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #fff; cursor: pointer; transition: transform 0.3s ease;"
                    onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
            </a>
            <br>
            <span id="htmer_time" style="display: block; margin-top: 0px; font-size: 13px; color: #666; line-height: 1.6;">
                <span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;"></span>
            </span>
        </div>
    </div>
    <style>
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.15); }
            50% { transform: scale(1); }
            75% { transform: scale(1.15); }
        }
    </style>
    <script type="text/javascript">
        function setTime() {
            var create_time = Math.round(new Date(Date.UTC(2025, 03, 17, 0, 0, 0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = '<span class="zmki_love_ah" style="color: #e74c3c; font-weight: bold;">一起走过</span><br>' +
                currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时';
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) return 0;
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) time[4] = second;
            return time;
        }
        setInterval(setTime, 1000);
        document.addEventListener('DOMContentLoaded', setTime);
    </script>
</section>
代码参考了小刘同学的文章。

爱心下载

我找了四个爱心svg，有需要的话可以下载使用：

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

最后修改：2026 年 03 月 15 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题：Handsome 主题添加侧边栏恋爱计时模块
 本文地址：https://blog.ybyq.wang/archives/1808.html
 版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。