7B2主题底部通用WordPress美化通知弹窗

7B2主题底部通用WordPress美化通知弹窗 - 我爱模板网

这个方法适用于所有的WordPress网站主题,并特别适合B2主题美化和子比主题等用户沟通较多的主题。带倒计时版本。

倒计时版版本:

<!-- 首页活动倒计时 -->
<div class="Ji-row">
<div class="Ji-col">
<div class="vip-login-tip" style="background-image: url(https://s1.hdslb.com/bfs/static/laputa-home/client/assets/vip-login-banner.c0cbe3b2.png);">
<div class="vip-login-countdown-row" ><i class="b2font b2-gift-2-line"></i><span class="countdown-lable" >距结束</span>
<div class="counddown-wrap" >
<p class="count"></p>
</div>
</div>
<div class="vip-login-title" >限时加入会员</div>
<div class="vip-login-subtitle" >升级VIP免费下载会员资源!限时特价 </div>
<div><a href="/vips" class="vip-login-btn b2-radius" >立即加入</a></div>
<div class="close" ><i class="b2font b2-close-line"></i></div>
</div>
</div>
</div>

<script>
var closeButtons = document.getElementsByClassName('close');
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', function() {
this.parentNode.style.display = 'none';
});
}
</script>

<script>
 window.onload = function () {
countDown();
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function countDown() {
var nowtime = new Date();
var endtime = new Date("2024/2/30");
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
d = addZero(d)
h = addZero(h);
m = addZero(m);
s = addZero(s);
document.querySelector(".count").innerHTML = `<span id="_d">${d}</span>天 <span id="_h">${h}</span> 时 <span id="_m">${m}</span> 分 <span id="_s">${s}</span> 秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "<style>.Ji-col{display: none;}</style>";
return;
}
setTimeout(countDown, 1000);
}
}
var closeButtons = document.getElementsByClassName('close');
</script>

您已阅读完《7B2主题美化(共6篇)》专题的第 5 篇。请继续阅读该专题下面的文章:

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

WordPress 如何安装 Redis 缓存插件

2024-2-24 10:09:49

wordpress教程

7b2主题文章下相关文章修改更多的推荐文章数量显示

2024-3-23 17:29:46

!
你也想出现在这里?立即 联系我们吧!
信息
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索