WordPress情侣小工具时间显示

1. 登录wordpress网站管理后台。

2. 进入外观—>小工具—>实时预览。
3. 添加“自定义html代码”小工具。
4. 将wordpress网站显示情侣恋爱天数的代码复制到该小工具中即可。

<div id="relationship-timer" style="text-align: center; font-family: Arial, sans-serif; padding: 20px; border-radius: 8px; background-color: #ffffff; width: auto;">
<!-- 两人头像 -->
<div style="display: flex; align-items: center; justify-content: center;">
<!-- 男朋友头像 -->
<img src="https://img.hlr-zl.top/img/zl.jpg" alt="男朋友" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
<!-- 爱心 -->
<span style="font-size: 24px; color: red;">❤️</span>
<!-- 女朋友头像 -->
<img src="https://img.hlr-zl.top/img/hlr.jpg" alt="女朋友" style="width: 50px; height: 50px; border-radius: 50%; margin-left: 10px;">
</div>
<!-- 在一起时间显示 -->
<h3 style="margin: 15px 0 5px; color: #FFC0CB;">LOVE</h3>
<p id="time-display" style="font-size: 18px; color: #FFC0CB;"></p>
</div>
<script>
  // 设置开始日期
  const startDate = new Date("2021-06-30T00:00:00"); // 替换为你们在一起的开始日期

  function updateTimer() {
    const now = new Date();
    const diff = now - startDate;
    
    // 计算天数、小时、分钟、秒数
    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);

    // 更新显示内容
    document.getElementById("time-display").innerText = `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
  }

  // 每秒更新一次
  setInterval(updateTimer, 1000);
</script>