WordPress侧边栏添加恋爱天数小工具<span>[WP小工具]</span>

WordPress侧边栏添加恋爱天数小工具[WP小工具]

04525

这一篇有点复杂,下面一篇是含这篇重新简化的一下代码,修改三个地方的数字就好

前言

说到情侣有纪念意义的天数,大家都知道,有人问有情人相恋大数的含义,另外,还有人想问情人婚恋命运的意义,你知道这是怎么回事?其实心上人谈情说爱流年的含义,下面代码可以记录你们在一起的天数!

效果

图片[1]-WordPress侧边栏添加恋爱天数小工具[WP小工具]-傲天博客

教程如下

一.

在服务器上创建一个html文件(文件名字根据自己想法填写,我写的是lianai.html

图片[2]-WordPress侧边栏添加恋爱天数小工具[WP小工具]-傲天博客

二.

把下边的php代码展开,复制粘贴放到创建的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://www.atbkw.cn/aotian/css/liangaiai.css">
    <link rel="stylesheet" href="https://www.atbkw.cn/aotian/css/liangai.css">
    <style type="text/css">
.widget_text .aplayer {margin: -12px -16px }
.widget_text .aplayer .aplayer-info {padding: 7px 7px 7px 10px}
.widget_text .aplayer .aplayer-info .aplayer-music {margin: 0 0 13px 0}
.giligili-item {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  /*margin-bottom: 8px;*/  /*阴影*/
  padding: 12px 16px;
  -webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
  box-shadow: 0 1px 3px rgba(26,26,26,.1)
}
    </style>
  </head>
  <body style="background-color: #FFFFFF;"bgcolor="#FFFFFF">
    <div class="widget_text giligili-item">
            <div class="textwidget custom-html-widget">
              <div style="text-align: center;">
                <img src="http://q1.qlogo.cn/g?b=qq&nk=2214045929&s=640" style="width: 50px;height: 50px;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;" />   
                <i class="fa fa-heart  throb" aria-hidden="true" style="color:red"></i> 
                <img src="http://q1.qlogo.cn/g?b=qq&nk=646273965&s=640" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 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;" />
                <br/>
                <span id="htmer_time"></span>
              </div>
              <script type="text/javascript" language="javascript">function setTime() {    
                  var create_time = Math.round(new Date(Date.UTC(2021, 3, 5, 21, 00, 0)).getTime() / 1000);
                  var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
                  currentTime = secondToDate((timestamp - create_time));
                  currentTimeHtml = currentTime[0] + ' 年 ' + currentTime[1] + ' 天 ' + currentTime[2] + ' 时 ' + currentTime[3] + ' 分 ' + currentTime[4] + ' 秒';
                  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);</script>
            </div>
    
    
  </body>
</html>
图片[3]-WordPress侧边栏添加恋爱天数小工具[WP小工具]-傲天博客

三.

把小工具代码展开,复制粘贴代码放入小工具自定义html里面

<iframe src="你的html文件链接地址" width="300" height="100" frameborder="0" scrolling="No" align="center">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">
</span></iframe>

上面代码中的“你的html文件链接地址”填写你刚刚创的文件域名加文件路径

ps:我是在我网站目录创了一个文件夹(aotian)又创了一个文件夹(html)所以我的链接是:我的域名/aotian/html/lianai.html(不懂联系站长)

图片[4]-WordPress侧边栏添加恋爱天数小工具[WP小工具]-傲天博客

HTML代码时间修改时间教程

下面第一个红框里面的QQ修改你自己的QQ

下面第二个红框里面的QQ修改你对象的QQ

下面第三个红框

2021是年

3是月ps:代码中的时间需提前一个月,例如我是4月在一起的,那么4-1=3,下面的月就填写3

4是日

21是小时

00是分钟

0是秒

修改好保存就欧克了

图片[5]-WordPress侧边栏添加恋爱天数小工具[WP小工具]-傲天博客

© 版权声明
THE END
喜欢就支持一下吧
点赞25
分享
评论 抢沙发
傲天的头像-傲天博客

昵称

取消
昵称表情代码图片