Typecho左右侧广告区域展示恋爱线时间
该教程适用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左右侧广告区域展示恋爱线时间的更多相关文章
- Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法
先上图百度广告,其实屏蔽广告很简单 主要分成以下三步: 下载Adblock Plus插件 安装Adblock Plus插件 开启屏蔽 一.下载Adblock Plus插件(官网离线版) 二.安装Adb ...
- arcgis C#判断点在线段的左右侧
要判断一个点在一条线段的左侧还是右侧,从网上查到了这样一个算法.其实本质上就是一个sin角度的计算问题. 设线段端点为从A(x1,y1)到B(x2,y2),线外一点P(x0,y0),判断该点位于有向线 ...
- 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 ...
- css左右侧自动填充宽度布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery-图片的放大镜显示效果(不需要大小图) ,放大镜图层显示在图片左右侧,不适用table
放大镜图层显示在图片的一侧,但当图片嵌套到table里,放大镜图层位置就有误,此方法只适用于没有table 错误原因: 原来的写法是图片相对于Td 的位置,而不是图片的真实位置,所以两张图片的坐标是一 ...
- c# winForm 将窗体状态栏StatusStrip 分成左中右三部分 右边显示当前时间
实现效果:通过StatusStrip显示窗体状态栏同时将状态栏分成三部分居左边显示相关文字信息中间空白显示居右边显示时间信息 1.创建窗体及添加StatusStrip 默认StatusStrip名称 ...
- Website English Comments
幻灯新闻下方的广告 Slide news at the bottom of the advertisement 人才招聘 recruitment 左/右侧推荐区 The left/right side ...
- 在APP中集成iAd Banner展示广告盈利
如果你已经做了一款超牛X的APP.你也许还有一件是需要操心.APP够好了,怎么盈利呢?你可以对下载你的APP的用户收费.也可以完全的免费,然后在APP里放广告来实现盈利.现在来说,除非一款APP真的是 ...
- IDEA右侧 Maven oracle依赖包有红色波浪线
1\下载 ojdbc14-10.2.0.4.0.jar http://www.java2s.com/Code/Jar/o/Downloadojdbc14102040jar.htm 2.将ojdbc14 ...
- PyQt(Python+Qt)学习随笔:怎么在QScrollArea滚动区域中展示子部件的超长内容?
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以针对部署在其上的子部件在不可见时进行滚动展示,但这种滚动展示仅只能展示内容层可见范围的子 ...
随机推荐
- zookeeper重启,线上微服务全部掉线,怎么回事?
注册中心zookeeper被重启,线上微服务全部掉线,怎么回事?! 最近因为一次错误的运维操作,导致线上注册中心zk被重启.而zk重启后发现所有线上微服务开始不断掉线,造成了持续30分钟的P0故障. ...
- PRINCE2核心知识点整理
前言 PRINCE2,即 PRoject IN Controlled Environment(受控环境中的项目)是一种结构化的项目管理方法论,由英国政府内阁商务部(OGC)推出,是英国项目管理标准. ...
- Redis性能瓶颈揭秘:如何优化大key问题?
1. 什么是Redis大key问题 Redis大key问题指的是某个key对应的value值所占的内存空间比较大,导致Redis的性能下降.内存不足.数据不均衡以及主从同步延迟等问题. 到底多大的数据 ...
- win10启动docker报错,错误码 0xffffffff
一.注册表修复(如果有就不用管) 在\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WinSock2\Parameters\AppId_Ca ...
- Swift CustomStringConvertible 协议的使用
目录 一.前言 二.使用场景 1. 整型类型的枚举使用 2. Class类型的使用 一.前言 先看一下Swift标准库中对CustomStringConvertible协议的定义 public pro ...
- java RSA生成公钥和私钥
1.随机生成密钥对 /** * 随机生成密钥对 * @throws NoSuchAlgorithmException */ public static void genKeyPair() throws ...
- Rust -- 模式与匹配
1. 模式 用来匹配类型中的结构(数据的形状),结合 模式和match表达式 提供程序控制流的支配权 模式组成内容 字面量 解构的数组.枚举.结构体.元祖 变量 通配符 占位符 流程:匹配值 --&g ...
- 自定义alert、confirm、prompt的vue组件
Prompt.vue组件 说明: 通过props定制定制的Prompt,可选值 mode 默认值:prompt, 其他模式:confirm.message(简单的提示,可设置提示显示时间,类似aler ...
- ESLint: More than 1 blank line not allowed. (no-multiple-empty-lines)
ESLint: More than 1 blank line not allowed. (no-multiple-empty-lines)
- 开发者一定要知道的 API 管理五大趋势
API First 大势所趋,APIaaS(API 作为服务)也将受到越来越多企业和组织的选择,研发团队对 API 研发管理工具的要求也水涨船高. API 在今天的数字化世界中扮演着至关重要的角色,随 ...