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

教程介绍

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

教程截图

教程步骤

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

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

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

<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这个标签~