一、写在前面

这是本博客历经折腾后发表的第一篇文章,群里的小伙伴想要知道本站恋爱计时小工具是怎么实现的。这个功能也不是我的创意,我是看见了木子博客,借用了部分代码,本来想全部抄来的,奈何他的JS在我这怎么也算不对时间,然后重写了JS代码。

二、原作者的实现方法

1、在服务器上新建一个HTML文件,插入以下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
        <link rel="stylesheet" href="https://a-oss.zmki.cn/2019/190616-5d05c81dbbaf5.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="https://api.gksir.top/zhutitupian/boytx.png" 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="https://api.gksir.top/zhutitupian/girltx.png" 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(2018, 4, 13, 10, 20, 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>

2、在需要调用的地方插入以下代码。

typecho使用Handsome主题usr/themes/handsome/component/sidebar.php大概81行的下面,可以自己找合适的位置。

 <!--随机文章-->
        <div id="widget-tabs-4-random" class="tab-pane fade wrapper-md no-js-show" role="tabpanel">
            <h5 class="widget-title m-t-none text-md"><?php _me("随机文章") ?></h5>
            <ul class="list-group no-bg no-borders pull-in">
            <?php Content::returnRandomPosts($this);?>
            </ul>
        </div>
       </div>
      </section>
      <!--此处插入代码-->

插入以下代码
<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>

二、我的实现方法

1、创建文件插入以下代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <link rel="stylesheet" href="font-awesome.css">
        <link rel="stylesheet" href="190616-5d05c81dbbaf5.css">
        <style type="text/css">
.widget_text .aplayer {margin: -12px -5px }
.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 5px;
    -webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
    box-shadow: 0 1px 3px rgba(26,26,26,.1)
}
        </style>
</head>

<body>
        <div class="widget_text giligili-item">
            <div class="textwidget custom-html-widget">
              <div style="text-align: center;">
              <img src="https://api.gksir.top/zhutitupian/boytx.png" 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="https://api.gksir.top/zhutitupian/girltx.png" 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" style="color: #58666e;"></span>
              </div>
              
              <script type="text/javascript" language="javascript">
    function setTime() {
        currentTimeHtml = timeFn(Date.parse("2013/11/25 10:23:14"));
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    // 计算两个时间差 dateBegin 开始时间
    function timeFn(dateBegin) {
        var dateEnd = new Date();//获取当前时间
        var dateDiff = dateEnd.getTime() - dateBegin;//时间差的毫秒数
        var yearDiff = Math.floor(dateDiff / (365 * 24 * 3600 * 1000));//计算出相差年数
        var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
        var leave1=dateDiff%(24*3600*1000)  //计算天数后剩余的毫秒数
        var hours=Math.floor(leave1/(3600*1000))//计算出小时数
        //计算相差分钟数
        var leave2=leave1%(3600*1000)  //计算小时数后剩余的毫秒数
        var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
        //计算相差秒数
        var leave3=leave2%(60*1000)   //计算分钟数后剩余的毫秒数
        var seconds=Math.round(leave3/1000)
        var leave4=leave3%(60*1000)   //计算分钟数后剩余的毫秒数
        var minseconds=Math.round(leave4/1000)
        //var timeFn = yearDiff+"年 "+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒";
        var timeFn = dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒";
        return timeFn;
    }
    setInterval(setTime, 1000);
</script>
              
              </div></div>
    </body>
</html>

2、在需要调用的地方插入调用代码。

三、写在最后

本文参考了以下内容:
为博客添加恋爱天数小工具 链接:https://muuzi.cn/303.html?unapproved=353&moderation-hash=bd102ea5bbc3346faae0f998672bf51f#comment-353

Last modification:April 5th, 2020 at 09:44 pm
如果觉得我的文章对你有用,请随意赞赏