该教程适用typecho动态博客框架,handsome主题,展示恋爱线时间,效果立于博客网页左侧右侧等区域,展示如下:

教程

typecho动态博客框架,handsome主题下,将下面代码粘贴到后台设置主题-开发者设置-自定义 JavaScript

<!--恋爱记时-->
function lovexhjSitetime() {
window.setTimeout("lovexhjSitetime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()+1
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
// 时间设置
var t1 = Date.UTC(2020, 04, 15, 15, 15, 00)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
diffMinutes * minutes) / seconds)
document.getElementById("lovexhjSitetime").innerHTML = "我们相恋了" + diffYears + "年" + diffDays + "天" +
diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
}
lovexhjSitetime()

时间留言都可以自行设置

代码位置

以下代码粘贴到全局右侧广告位即可

<aside class="widget_text sidebar-widget widget_custom_html fadeInUp">
<div class="textwidget custom-html-widget">
<div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/ce811c68ff1b4eb9a5b6d2a784d07c31.png" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/lovelogo%20.gif" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/3db15cc33adda3afcdbc62e18fc8403f.png" alt="love" style="width: 60px; border-radius: 50%;">
</div>
<p id="lovexhjSitetime" style="font-size: 0.8rem; margin-top: 16px; background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;">我们相恋了104天14小时47分钟19秒啦</p> </div>
</div>
</aside>

展示标题

侧边广告栏展示名字在云空间的usr/themes/handsome/component/sidebar.php文件中修改。

参考文章

我的个人博客主页,欢迎访问

我的CSDN主页,欢迎访问

我的GitHub主页,欢迎访问s

Typecho左右侧广告区域展示恋爱线时间的更多相关文章

  1. Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法

    先上图百度广告,其实屏蔽广告很简单 主要分成以下三步: 下载Adblock Plus插件 安装Adblock Plus插件 开启屏蔽 一.下载Adblock Plus插件(官网离线版) 二.安装Adb ...

  2. arcgis C#判断点在线段的左右侧

    要判断一个点在一条线段的左侧还是右侧,从网上查到了这样一个算法.其实本质上就是一个sin角度的计算问题. 设线段端点为从A(x1,y1)到B(x2,y2),线外一点P(x0,y0),判断该点位于有向线 ...

  3. Xcode6 运行程序后,右侧Debug区域的Memory显示空白解决方法

    http://chenyh-blog.com/%E8%9B%8B%E7%96%BC%E7%9A%84%E5%86%85%E5%AD%98-%E7%AC%AC%E4%B8%89%E7%AF%87-sdw ...

  4. css左右侧自动填充宽度布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jQuery-图片的放大镜显示效果(不需要大小图) ,放大镜图层显示在图片左右侧,不适用table

    放大镜图层显示在图片的一侧,但当图片嵌套到table里,放大镜图层位置就有误,此方法只适用于没有table 错误原因: 原来的写法是图片相对于Td 的位置,而不是图片的真实位置,所以两张图片的坐标是一 ...

  6. c# winForm 将窗体状态栏StatusStrip 分成左中右三部分 右边显示当前时间

    实现效果:通过StatusStrip显示窗体状态栏同时将状态栏分成三部分居左边显示相关文字信息中间空白显示居右边显示时间信息 1.创建窗体及添加StatusStrip  默认StatusStrip名称 ...

  7. Website English Comments

    幻灯新闻下方的广告 Slide news at the bottom of the advertisement 人才招聘 recruitment 左/右侧推荐区 The left/right side ...

  8. 在APP中集成iAd Banner展示广告盈利

    如果你已经做了一款超牛X的APP.你也许还有一件是需要操心.APP够好了,怎么盈利呢?你可以对下载你的APP的用户收费.也可以完全的免费,然后在APP里放广告来实现盈利.现在来说,除非一款APP真的是 ...

  9. IDEA右侧 Maven oracle依赖包有红色波浪线

    1\下载 ojdbc14-10.2.0.4.0.jar http://www.java2s.com/Code/Jar/o/Downloadojdbc14102040jar.htm 2.将ojdbc14 ...

  10. PyQt(Python+Qt)学习随笔:怎么在QScrollArea滚动区域中展示子部件的超长内容?

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以针对部署在其上的子部件在不可见时进行滚动展示,但这种滚动展示仅只能展示内容层可见范围的子 ...

随机推荐

  1. 【Vue项目】尚品汇(三)Home模块+Floor模块+Swiper轮播图

    写在前面 今天是7.23,这一篇内容主要完成了Home模块和部分Search模块的开发,主要是使用了swiper轮播图插件获取vuex仓库数据展示组件以及其他信息. 1 Search模块 1.1 Se ...

  2. 开心档之MySQL 连接

    MySQL 连接 使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库. 实例 以下是从命令行中连接mysql服务器的简单实例: [root@ ...

  3. ROS机器人SLAM创建地图

    ROS机器人SLAM创建地图 连接小车 ssh clbrobot@clbrobot 激活树莓派 roslaunch clbrobot bringup.launch 开启雷达 打开另一个终端输入: ss ...

  4. R的画图

    关于R基础 有3个需要总结的地方 R的画图(统计学图,ggplot) R的基本语法 R dataframe相关 Plot plot(1,2) plot(c(1, 2, 3, 4, 5), c(3, 7 ...

  5. [人脸活体检测] 论文: Learning Deep Models for Face Anti-Spoofing: Binary or Auxiliary Supervision

    Learning Deep Models for Face Anti-Spoofing: Binary or Auxiliary Supervision 论文简介 与人脸生理相关的rppG信号被研究者 ...

  6. 深度学习-06(PaddlePaddle体系结构与基本概念[Tensor、Layer、Program、Variable、Executor、Place]线性回归、波士顿房价预测)

    文章目录 深度学习-06(PaddlePaddle基础) paddlePaddle概述 PaddlePaddle简介 什么是PaddlePaddle 为什么学习PaddlePaddle PaddleP ...

  7. [Pytorch框架] 1.3、张量

    文章目录 PyTorch是什么? Tensors(张量) NumPy 转换 CUDA 张量 PyTorch是什么? 基于Python的科学计算包,服务于以下两种场景: 作为NumPy的替代品,可以使用 ...

  8. Git&GitHub简介与入手(三)

    五.eclipse中的git使用 1.eclipse中本地库操作 (检测显示创建成功): (设置本地库范围签名): (一些git里的图标,保存着不同内容): https://github.com/gi ...

  9. 2023-04-08:社交网络中的最优邀请策略探究。本文以小红准备开宴会为例,提出一种基于贪心算法和二分查找的解决方案,帮助读者在保证愉悦值不低于k的前提下,最小化宴会的阶层差距。

    2023-04-08:小红有n个朋友, 她准备开个宴会,邀请一些朋友, i号朋友的愉悦值为a[i],财富值为b[i], 如果两个朋友同时参加宴会,这两个朋友之间的隔阂是其财富值差值的绝对值, 宴会的隔 ...

  10. vue全家桶进阶之路42:Vue3 SCSS、SASS、CSS

    SCSS和SASS都是CSS预处理器,它们的主要目的是简化CSS的编写,增加可维护性,并提供更丰富的功能.下面是它们与普通的CSS的区别: 语法:SCSS和SASS都具有比普通CSS更丰富的语法.其中 ...