该教程适用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. zookeeper重启,线上微服务全部掉线,怎么回事?

    注册中心zookeeper被重启,线上微服务全部掉线,怎么回事?! 最近因为一次错误的运维操作,导致线上注册中心zk被重启.而zk重启后发现所有线上微服务开始不断掉线,造成了持续30分钟的P0故障. ...

  2. 麻了,不要再动不动就BeanUtil.copyProperties!!!

    前言 最近项目上要求升级一个工具包hutool的版本,以解决安全漏洞问题,这不升级还好,一升级反而捅出了更大的篓子,究竟是怎么回事呢? 事件回顾 我们项目原先使用的hutool版本是5.7.2,在代码 ...

  3. MIT6.824 Distributed-System(Lab1)-MapReduce

    Lab address: http://nil.csail.mit.edu/6.824/2020/labs/lab-mr.html paper: MapReduce: Simplified Data ...

  4. Docker Go语言程序的编译与打包

    使用Docker打包Go程序的镜像 Golang镜像 首先使用docker pull获取golang镜像 $ sudo docker pull golang:1.18.3 查看镜像: $ sudo d ...

  5. 小程序TS报错 "无法重新声明块范围变量。此处也声明了xx "

    初学者简单的方法,目前还没有遇到问题 想法很简单,当export导出,骗eslint认为是一个模块. 如果有新的问题欢迎留言,我也在学习 1 import utilsApi from '../util ...

  6. Centos7.x 安装Chrome + Chrome driver

    一.安装Chrome 1.执行下面命令进行安装操作 yum install https://dl.google.com/linux/direct/google-chrome-stable_curren ...

  7. 在算数运算中,能否将 bool 值 true 视作 1?

    true == 1; true + 1; If the destination type is bool, see 4.12. If the source type is bool, the valu ...

  8. SSH客户端常用工具SecureCRT操作

    目录 1.1 SecureCRT工具介绍 1.2 SecureCRT工具安装 1.3配置SecureCRT连接Linux主机 1.4调整SecureCRT终端显示和回滚缓冲区大小 1.5调整字体及光标 ...

  9. 从浏览器输入域名开始分析DNS解析过程

    摘要:DNS(Domain Name System)是域名系统的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,用于 TCP/IP 网络. 本文分享自华为云社区<DNS那些事--从浏 ...

  10. 2022-02-27:k8s安装yapi,yaml如何写?

    2022-02-27:k8s安装yapi,yaml如何写? 答案2022-02-27: yaml如下: apiVersion: apps/v1 kind: Deployment metadata: l ...