Zblog博客首页侧边栏情侣日期计时

博主： literature
发布时间：2023 年 08 月 28 日
178 次浏览
关闭评论
898字数
分类：主机教程

教程介绍

怎么给ZBlogPHP首页添加显示情侣在一起时长的日期计时？

教程截图

教程步骤

1、自定义一个模块（后台-模块管理-新建模块）

2、写入HTML代码


在一起700天10小时10分钟10秒啦~

3、打开主题配置-广告设置-网页底部接口，写入js代码

将计算事件函数抽离出来，调用后在使用定时器

最后：不可在网页头部接口写入js代码，因为页面是从上加载的，执行到js代码的时候还没有p这个标签~

本文来自投稿，不代表本站立场，如若转载，请注明出处：

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

Zblog博客首页侧边栏情侣日期计时

literature • 2023 年 08 月 28 日

<h2>教程介绍</h2><p>怎么给ZBlogPHP首页添加显示情侣在一起时长的日期计时？</p><h2>教程截图</h2><p><img src="https://ioku.net/2022/10/16/634bb53dcabe0.png" alt="l9b1eoe8.png" title="l9b1eoe8.png" class="aligncenter"style=""></p><h2>教程步骤</h2><p>1、自定义一个模块（后台-模块管理-新建模块）<br /><img src="https://ioku.net/2022/10/16/634bb551b9c15.png" alt="l9b1f3nk.png" title="l9b1f3nk.png" class="aligncenter"style=""><br />2、写入HTML代码</p><pre><code class="lang-html"><div style="width: 280px;height: 115px; text-align: center;overflow: hidden;position: relative;"><div style="width: 70px;height:70px;margin-top: 10px;float: left;border-radius: 50%;overflow: hidden;margin-left:30px;"><img src="http://q1.qlogo.cn/g?b=qq&nk=207781983&s=640" style="width: 100%;height: 100%;"></div><div style="width: 70px;height:70px;margin-top: 10px;float: left;"><img src="https://www.cat61.com/img/z.webp" alt=""style=""></div><div style="width: 70px;height:70px;margin-top: 10px;float: left;border-radius: 50%;overflow: hidden;"><img src="http://q1.qlogo.cn/g?b=qq&nk=1299276430&s=640" alt="" style="width: 100%; height: 100%;"style=""></div><div style="position: absolute; top: 90px;left:30px;"><p style="background: linear-gradient(to right, red, blue);color: transparent;-webkit-background-clip:text;" id="loveTime">在一起700天10小时10分钟10秒啦~</p></div></div></code></pre><p>3、打开主题配置-广告设置-网页底部接口，写入js代码<br /><img src="https://ioku.net/2022/10/16/634bb57aed4f0.png" alt="l9b1fzmp.png" title="l9b1fzmp.png" class="aligncenter"style=""></p><p>将计算事件函数抽离出来，调用后在使用定时器</p><pre><code class="lang-js"><script>
    fn()
    setInterval(fn, 1000)
    function fn() {
        var newTime = +new Date()
        var oldTime = +new Date('2019-10-01 12:08:00')
        var time = (newTime - oldTime) / 1000
        var tian = parseInt(time / 3600 / 24)  //天数
        var xiaoshi = parseInt(time / 3600 % 24) //小时
        var fenzhong = parseInt(time / 60 % 60) //分钟
        var miaoshu = parseInt(time % 60)
        var p = document.querySelector('#loveTime')
        p.innerText = `在一起${tian}天${xiaoshi}小时${fenzhong}分钟${miaoshu}秒啦~`
        }</script></code></pre><p>最后：不可在网页头部接口写入js代码，因为页面是从上加载的，执行到js代码的时候还没有p这个标签~</p><div class="Copyrightnew">本文来自投稿，不代表本站立场，如若转载，请注明出处：<br />
<input id="informationurl" value="https://www.52xzv.cn/archives/1798.html"></div>

Zblog博客首页侧边栏情侣日期计时

教程介绍

教程截图

教程步骤

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

conda 常用命令

Kong插件开发工具包

github等开源网站加速脚本及搭建方法-v1.0

铭记历史，九一八事件！

Epic喜+2《失忆症：重生》和《像素立方世界》- 星泽V社

Zblog博客首页侧边栏情侣日期计时