给网站添加上恋爱计时小工具-完美适配Joe主题

恋爱倒计时小工具
使用Javascript来计时⏲
给自己的网站侧边栏位置添加上一个计时小工具，在丰富网站内容的同时又使网站显得很浪漫。

原来搭建的有一个基于Typecho情侣主题Brave的站点，里面的点点滴滴和Love List内容很久都没更新了，好像也就一个计时有点用，想着就直接在这个博客站侧栏单独添加一个计时的功能，然后就搜了一下，还挺多博主有记录关于添加恋爱计时功能的。
找了一下也没有拿来就能用的（因为自己不会写哈），最后在小言u博客找到了关于这块的代码，然后做了细微修改，完美适配现在用的Joe主题，然后就写个文章分享下吧，也记录下折腾修改的内容，时间长了自己都不记得修改的哪了。

效果图：
给网站添加上恋爱计时小工具-完美适配Joe主题配图1.webp
代码在最下面。。。

Joe主题添加方法：
PC端：
如果你跟我用的一样是Joe主题，直接将PC段代码复制粘贴到自定义侧边栏内即可，用的其他主题的话就自行发挥吧。。。
给网站添加上恋爱计时小工具-完美适配Joe主题配图2.webp

PC端代码：
<ul class="joe_header__slideout-count">
<style>
/* 头像大小调整 */
.pctouxiang{
    width: 66px;     /* 头像宽度 */
    height: 66px;     /* 头像高度 */
    vertical-align: -20px;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 5px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
    border: 2px solid #fff;
}
</style>
<body>
  <div style="text-align: center;">
    <!-- 头像1 -->
    <img class="pctouxiang" src="https://img.hary.cc/pan/2023/12-b3d51adb737efd61.jpeg">
    
    <svg class="my-face" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M866.944 256.768c-95.488-95.488-250.496-95.488-345.984 0l-13.312 13.312-9.472-9.472c-93.824-93.824-246.656-100.736-343.68-10.368-101.888 94.976-104.064 254.592-6.4 352.256l13.568 13.568 299.264 299.264c25.728 25.728 67.584 25.728 93.44 0l312.576-312.576c95.488-95.488 95.488-250.368 0-345.984zM335.36 352.64c-20.48 0-40.832 6.016-56.704 18.944a85.4912 85.4912 0 0 0-6.912 126.976c9.984 9.984 9.984 26.24 0 36.224l-3.2 3.2c-8.192 8.192-21.632 8.192-29.952 0-52.608-52.608-57.216-138.496-6.528-192.896 26.112-28.032 61.952-43.52 100.096-43.52 14.08 0 25.6 11.52 25.6 25.6v3.072c0 12.416-9.984 22.4-22.4 22.4z" p-id="21617" data-spm-anchor-id="a313x.7781069.0.i46" class="selected" fill="#FF2727"></path></svg>

    <!-- 头像2 -->
    <img class="pctouxiang" src="https://img.hary.cc/pan/2023/12-b93dfe55e6f079f2.jpeg"><br>
    
<span id="pctimejishiqi"></span>
  </div>
  <script>
    function timingTime(){
                // 开始时间 格式： 年-月-日 时:分:秒
                // 例如：2021-8-14 00：00：00
      let start = '2022-2-7 09:15:00'
      let startTime = new Date(start).getTime()
      let currentTime = new Date().getTime()
      let difference = currentTime - startTime
      let m =  Math.floor(difference / (1000))
      let mm = m % 60  // 秒
      let f = Math.floor(m / 60)
      let ff = f % 60 // 分钟
      let s = Math.floor(f/ 60) // 小时
      let ss = s % 24
      let day = Math.floor(s  / 24 ) // 天数
      return "已经在一起" + "<br> " + day + " 天 " + ss + " 小时 " + ff + " 分钟 " + mm +' 秒'
    }
    setInterval(()=>{
      document.getElementById('pctimejishiqi').innerHTML = timingTime()
    },1000)
  </script></body>
    </ul>

手机端：
找到/usr/themes/Joe/public文件夹下的header.php文件，打开编辑
我是在累计收到X条评论下方添加的，大概就在324行，具体效果图可以手机访问看下我的站点的侧边栏效果，也可以在头像下面或者最后添加，把代码放到你想要显示的位置就可以了。
给网站添加上恋爱计时小工具-完美适配Joe主题配图3.webp

手机端代码：
<!--PE侧边栏恋爱计时begin-->
    <ul class="joe_header__slideout-count">
<style>
/* 头像大小调整 */
.petouxiang{
    width: 66px;     /* 头像宽度 */
    height: 66px;     /* 头像高度 */
    vertical-align: -20px;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 5px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
    border: 2px solid #fff;
}
</style>
<body>
  <div style="text-align: center;">
    <!-- 头像1 -->
    <img class="petouxiang" src="https://img.hary.cc/pan/2023/12-b3d51adb737efd61.jpeg">
    
    <svg class="my-face" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M866.944 256.768c-95.488-95.488-250.496-95.488-345.984 0l-13.312 13.312-9.472-9.472c-93.824-93.824-246.656-100.736-343.68-10.368-101.888 94.976-104.064 254.592-6.4 352.256l13.568 13.568 299.264 299.264c25.728 25.728 67.584 25.728 93.44 0l312.576-312.576c95.488-95.488 95.488-250.368 0-345.984zM335.36 352.64c-20.48 0-40.832 6.016-56.704 18.944a85.4912 85.4912 0 0 0-6.912 126.976c9.984 9.984 9.984 26.24 0 36.224l-3.2 3.2c-8.192 8.192-21.632 8.192-29.952 0-52.608-52.608-57.216-138.496-6.528-192.896 26.112-28.032 61.952-43.52 100.096-43.52 14.08 0 25.6 11.52 25.6 25.6v3.072c0 12.416-9.984 22.4-22.4 22.4z" p-id="21617" data-spm-anchor-id="a313x.7781069.0.i46" class="selected" fill="#FF2727"></path></svg>

    <!-- 头像2 -->
    <img class="petouxiang" src="https://img.hary.cc/pan/2023/12-b93dfe55e6f079f2.jpeg"><br>
    
<span id="petimejishiqi"></span>
  </div>
  <script>
    function timingTime(){
                // 开始时间 格式： 年-月-日 时:分:秒
                // 例如：2021-8-14 00：00：00
      let start = '2022-2-7 09:15:00'
      let startTime = new Date(start).getTime()
      let currentTime = new Date().getTime()
      let difference = currentTime - startTime
      let m =  Math.floor(difference / (1000))
      let mm = m % 60  // 秒
      let f = Math.floor(m / 60)
      let ff = f % 60 // 分钟
      let s = Math.floor(f/ 60) // 小时
      let ss = s % 24
      let day = Math.floor(s  / 24 ) // 天数
      return "已经在一起" + "<br> " + day + " 天 " + ss + " 小时 " + ff + " 分钟 " + mm +' 秒'
    }
    setInterval(()=>{
      document.getElementById('petimejishiqi').innerHTML = timingTime()
    },1000)
  </script></body>
    </ul>
<!--PE侧边栏恋爱计时end-->

给网站添加上恋爱计时小工具-完美适配Joe主题

评论 (2)