整体效果
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://xxxx.xx" style="width: 100%;height: 100%;">
</div>
<div style="width: 70px;height:70px;margin-top: 10px;float: left;">
<img src="https://xxx.xxxx" alt="">
</div>
<div style="width: 70px;height:70px;margin-top: 10px;float: left;border-radius: 50%;overflow: hidden;">
<img src="http://xxx.xxxx" 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这个标签~
文章来源于：https://www.cat61.com/92.html
0 赞
or 打赏
喜欢就打赏一点
上一篇
已有0 条评论，0 个点赞
