请注意，本文编写于 955 天前，最后修改于 944 天前，其中某些信息可能已经过时。
此学习记录适用于
Typecho程序的Handsome主题。
前两天，添加了小站开站的第一个友情链接——@优世界
就随便逛了逛，发现了一个比较好玩的恋爱小工具，可以放在博客的侧边栏
记录自己的男/女朋友的恋爱时长，感觉还是不错的，所以记录一下！
温馨提示：以下代码的时间设定需要提前一个月，不然会时间不准
小赵同学提供了两种方法，第一种就是直接填写html，Handsome主题可以填在「
设置外观——开发者设置——全局右侧边栏广告位」，html如下：（handsome填写时删除第一行和最后一的<body>和</body>）<body>
<div style="text-align: center;margin-top: 10px;">
<link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet">
<img src="https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"
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;">
<svg viewBox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
class="my-face">
<path
d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
fill="#515151"></path>
</svg>
<img src="https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"
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 class="zmki_love_ah"></span></span>
</div>
<script type="text/javascript" language="javascript">function setTime() {
var create_time = Math.round(new Date(Date.UTC(2019, 12, 28, 6, 45, 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">已经在一起</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);
</script>
</body>
因为html与handsome主体的css不兼容，所以需要把第三行带有css的代码删除
<link type="text/css" media="all" href="https://a-oss.zmki.cn/20190606/love.css" rel="stylesheet">
因为填在了全局右侧边栏广告位，所以标题会显示广告，修改标题可在handsome主题目录「component——sidebar.php」找到广告字样修改即可，大概在112行可找到。
第二种方法就是网页嵌套的方法，利用iframe进行嵌套
在本地新建一个html的文件，将第一种方法里面的代码扔进去就好（这里不需要修改上面的html）
把iframe填入「设置外观——开发者设置——全局右侧边栏广告位」
之后只需要把相应的东西修改成自己的就好
<iframe src="填入新建html的地址" width="204" height="120" 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>
但是使用handsome主题不推荐使用这种方法，因为手机端没能居中显示~修改了iframe的属性我也没有调试成功~
最后附我自己修改后的代码
<body>
<div style="text-align: center;margin-top: 10px;">
<img src="https://q2.qlogo.cn/g?b=qq&nk=1486823198&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;">
<div style="display: inline-block">
<img src="/other/jiojio.gif" style="width: 40px;height: 40px;">
</div>
<img src="https://q2.qlogo.cn/g?b=qq&nk=2809627578&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 class="zmki_love_ah"></span></span>
</div>
<script type="text/javascript" language="javascript">function setTime() {
var create_time = Math.round(new Date(Date.UTC(2021,06,29,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">一起走过</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);
</script>
</body>
效果如下：
本文章部分借鉴自@优世界
14 条评论
我之前也是这样，但是写的不好看，试试你的hh
试吧
分享出来就是让人用的
可惜我没有对象。。。我为什么要点进来
之前忘了说了 这个确实要月份加一 后面我会重写写一下
这里解释一下原因 因为我是用Date这个内置对象获取的月份时间
获得的月份范围是0-11月份，如果用字符串类型就不会出现这个问题
不然理论上要加一个月 先用着吧 如果动手能力强 自己改一下
而且我也是用了一段时间发现的，也加上一个月时间就差不多，有的可能会有月份天数的差别吧，但是我加了一个月好像是没有
就这样吧，懒得改了，
也不是啥重要的东西
起初写这个页面 是在一个WordPress主题移植过来的
因为图方便，直接把css搬过来了，然后加到主题之后，发现自己没有女朋友
就直接放出来了，会有一些冗余css代码，没有精修调整，哈哈，感谢老哥调整，应该有更多人会需要它
没有女朋友可真实了
hhhh
就针对handsome小小的调整了下，发现嵌套居中不了，然后直接用css又冲突，那就只能把css删了然后直接用了，就是小闪电没有那么灵动了，别的感觉还挺好的，希望别人需要吧
加油！