腾轩网 - 专注优质QQ活动-绿色软件-游戏辅助-技术教程分享网!

kqq

靓号
流量
流量

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

腾轩网 其他教程
扫码手机访问Zblog博客首页侧边栏情侣日期计时
0

教程介绍

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

教程截图

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

教程步骤

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

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

2、写入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="">
        </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%;">
        </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>

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

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

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

<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>

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

标签:

暂无标签
    协助本站seo优化一下,谢谢!
    关键词不能为空

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 571533527@qq.com

同类推荐
分享
发布评论

未分类 Zblog博客首页侧边栏情侣日期计时
教程介绍 怎么给ZBlogPHP首页添加显示情侣在一起时长的日期计时? 教程截图 教程步骤 ...
扫描二维码阅读原文
腾轩网 January, 01
初始化 ×