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博客地址 滚动区域可以针对部署在其上的子部件在不可见时进行滚动展示,但这种滚动展示仅只能展示内容层可见范围的子 ...
随机推荐
- ansible-kubeadm在线安装k8s v1.19-v1.20版本
ansible-kubeadm在线安装k8s v1.19-v1.20版本 1. ansible-kubeadm在线安装k8s v1.19-v1.20版本 安装要求 确保所有节点系统时间一致 操作系统要 ...
- nginx概要
新机(CentOS7)配置nginx: 一. 更新yum源为阿里云镜像 ping mirrors.aliyun.com mv /etc/yum.repos.d/CentOS-Base.repo /et ...
- Git代码提交规范
1. 引言 思想,因人而异,难以重复 写代码时,每个人的习惯是不一样的,所以,引入了代码规范,为了省力,引入了自动格式化代码工具,前端工程中比较典型的自动格式化代码工具如:Prettier · Opi ...
- for of 和 for in 的区别
1 var arr = ["f", "6", 3, "a", 7]; 2 var obj = { name: "shun" ...
- h5新增特性 和 css3 新特性
H5新增: 1)用于绘画 canvas 元素. 2) 用于媒介回放的 video 和 audio 元素. 3)语义化标签 article.footer.header.nav.section3) 4)表 ...
- 牛客网:华为机试题(python版本)
输入一行:input() 输入的一行有多个信息:input().split() 有多组测试用例(多组同时输入): while true try except... 1.计算字符串最后一个单词的长度,单 ...
- [OpenCV-Python] 23 图像变换
文章目录 OpenCV-Python:IV OpenCV中的图像处理 23 图像变换 23.1 傅里叶变换 23.1.1 Numpy 中的傅里叶变换 23.1.2 OpenCV 中的傅里叶变换 23. ...
- 几种常见的Python数据结构
摘要:本文主要为大家讲解在Python开发中常见的几种数据结构. 本文分享自华为云社区<Python的常见数据结构>,作者: timerring . 数据结构和序列 元组 元组是一个固定长 ...
- 消息推送平台的实时数仓?!flink消费kafka消息入到hive
大家好,3y啊.好些天没更新了,并没有偷懒,只不过一直在安装环境,差点都想放弃了. 上一次比较大的更新是做了austin的预览地址,把企业微信的应用和机器人消息各种的消息类型和功能给完善了.上一篇文章 ...
- 2022-02-21:不含连续1的非负整数。 给定一个正整数 n ,返回范围在 [0, n] 都非负整数中,其二进制表示不包含 连续的 1 的个数。 输入: n = 5 输出: 5 解释: 下面是带
2022-02-21:不含连续1的非负整数. 给定一个正整数 n ,返回范围在 [0, n] 都非负整数中,其二进制表示不包含 连续的 1 的个数. 输入: n = 5 输出: 5 解释: 下面是带有 ...