当前位置:首页>文章资讯WordPress教程> B2主题添加右下角会员活动弹窗

B2主题添加右下角会员活动弹窗

效果图:

B2主题添加右下角会员活动弹窗

原版自己试一下就好了,原来是有一个活动倒计时的,因为我这里直接标了日期就把倒计时去掉了,各位可根据自身需求自行调整

教程:

首先是原版的代码:

    1. <script>

 

    1. window.onload = function () {

 

    1. countDown();

 

    1. function addZero(i) {

 

    1. return i < 10 ? "0" + i: i + "";

 

    1. }

 

    1. function countDown() {

 

    1. var nowtime = new Date();

 

    1. var endtime = new Date("此处填写截至日期格式为xxxx/xx/xx");

 

    1. var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);

 

    1. var d = parseInt(lefttime / (24*60*60))

 

    1. var h = parseInt(lefttime / (60 * 60) % 24);

 

    1. var m = parseInt(lefttime / 60 % 60);

 

    1. var s = parseInt(lefttime % 60);

 

    1. d = addZero(d)

 

    1. h = addZero(h);

 

    1. m = addZero(m);

 

    1. s = addZero(s);

 

    1. document.querySelector(".count").innerHTML = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`;

 

    1. if (lefttime <= 0) {

 

    1. document.querySelector(".count").innerHTML = "<style>.Ji-col{display: none;}</style>";

 

    1. return;

 

    1. }

 

    1. setTimeout(countDown, 1000);

 

    1. }

 

    1. }

 

    1. </script>

 

    1. <div class="Ji-row">

 

    1. <div class="Ji-col">

 

    1. <div class="vip-login-tip" style="background-image: url(此处填写图片url);">

 

    1. <div class="vip-login-countdown-row">

 

    1. <div class="counddown-wrap">

 

    1. <p class="count"></p>

 

    1. </div>

 

    1. </div>

 

    1. <div class="vip-login-title">此处填写活动标题</div>

 

    1. <div class="vip-login-subtitle">此处填写活动介绍</div>

 

    1. <!--此处子比用户不用动,其他主题请替换为自己的vip开通页面-->

 

    1. <div><a href="javascript:;" rel="external nofollow" class="vip-login-btn pay-vip">此处填写按钮内容</a></div>

 

    1. <div class="close"><svg class="ic-close" viewBox="0 0 1024 1024"><path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path></svg></div>

 

    1. </div>

 

    1. </div>

 

    1. </div>

 

    1. <script>

 

    1. var closeButtons = document.getElementsByClassName('close');

 

    1. for (var i = 0; i < closeButtons.length; i++) {

 

    1. closeButtons[i].addEventListener('click', function() {

 

    1. this.parentNode.style.display = 'none';

 

    1. });

 

    1. }

 

    1. </script>

 

    1. <style>

 

    1. @media (max-width:800px) {

 

    1. .Ji-col {

 

    1. display:none;

 

    1. }

 

    1. }.vip-login-tip {

 

    1. position:relative;

 

    1. box-sizing:border-box;

 

    1. padding:18px 10px 22px 20px;

 

    1. width:400px;

 

    1. height:175px;

 

    1. border-radius:10px;

 

    1. background-color:#fff;

 

    1. background-position:right 50%;

 

    1. background-repeat:no-repeat;

 

    1. background-size:130px;

 

    1. box-shadow:0 0 30px rgba(0,0,0,.1);

 

    1. box-shadow:0px 0px 8px rgba(255,112,173,0.35);

 

    1. }

 

    1. .vip-login-countdown-row {

 

    1. display:flex;

 

    1. align-items:center

 

    1. }

 

    1. .vip-login-countdown-row i {

 

    1. color:var(--header-color);

 

    1. font-size:18px

 

    1. }

 

    1. .vip-login-countdown-row .countdown-lable {

 

    1. margin:0 3px 0 4px;

 

    1. font-size:14px;

 

    1. line-height:16px

 

    1. }

 

    1. .vip-login-countdown-row .counddown-wrap {

 

    1. font-size:14px

 

    1. }

 

    1. .vip-login-title {

 

    1. width:218px;

 

    1. margin:10px 0;

 

    1. font-weight:600;

 

    1. font-size:16px;

 

    1. line-height:22px;

 

    1. display:-webkit-box;

 

    1. overflow:hidden;

 

    1. -webkit-box-orient:vertical;

 

    1. text-overflow:-o-ellipsis-lastline;

 

    1. text-overflow:ellipsis;

 

    1. word-break:break-word!important;

 

    1. word-break:break-all;

 

    1. line-break:anywhere;

 

    1. -webkit-line-clamp:1

 

    1. }

 

    1. .vip-login-subtitle {

 

    1. width:218px;

 

    1. color:var(--text2);

 

    1. font-size:14px;

 

    1. line-height:20px;

 

    1. display:-webkit-box;

 

    1. color:#8e8e8e;

 

    1. overflow:hidden;

 

    1. -webkit-box-orient:vertical;

 

    1. text-overflow:-o-ellipsis-lastline;

 

    1. text-overflow:ellipsis;

 

    1. word-break:break-word!important;

 

    1. word-break:break-all;

 

    1. line-break:anywhere;

 

    1. -webkit-line-clamp:1

 

    1. }

 

    1. .vip-login-btn {

 

    1. margin-top:10px;

 

    1. display:inline-block;

 

    1. height:40px;

 

    1. width:160px;

 

    1. line-height:40px;

 

    1. text-align:center;

 

    1. border-radius:8px;

 

    1. color:#fff;

 

    1. background-color:#00b2ff;

 

    1. transition:background-color .3s,color .3s;

 

    1. font-weight:600;

 

    1. cursor:pointer

 

    1. }

 

    1. .close {

 

    1. position:absolute;

 

    1. top:0px;

 

    1. right:7px;

 

    1. cursor:pointer

 

    1. }

 

    1. .Ji-row {

 

    1. position:fixed;

 

    1. bottom:30px;

 

    1. right:80px;

 

    1. z-index:10;

 

    1. display:flex;

 

    1. justify-content:right

 

    1. }

 

    1. .vip-login-countdown-row .counddown-wrap span {

 

    1. display:inline-block;

 

    1. margin:0px 4px;

 

    1. width:20px;

 

    1. font-size:13px;

 

    1. height:18px;

 

    1. color:var(--header-color);

 

    1. border-radius:5px;

 

    1. text-align:center;

 

    1. line-height:18px;

 

    1. font-weight:500px;

 

    1. background:var(--header-color)

 

    1. }

 

    1. </style>

放在footer.php文件里,或者放在你主题自定义底部html代码中也行,只要可以加载就行!

接下来就是我改过的代码,增加了用户关闭弹窗后当天不再弹出,第二天才会弹出,或手动清除cookies,也可以

<script>
window.onload = function () {
countDown();
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function countDown() {
var nowtime = new Date();
var endtime = new Date("2023/12/25");
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 = `活动倒计时<p class="red_p"> ${d}</p>天 <p class="red_p">${h}</p> 时 <p class="red_p">${m}</p> 分 <p class="red_p">${s} </p>秒`;
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "<style>.Ji-col{display: none;}</style>";
return;
}
setTimeout(countDown, 1000);
}
}
</script>
<div class="Ji-row">
<div class="Ji-col">
<div class="vip-login-tip" style="background-image: url(https://dns.gzkj8.com/2023/09/20230915021147834.jpg);">
<div class="vip-login-countdown-row">
<div class="counddown-wrap">
<p class="count" style="display: flex;"></p>
</div>
</div>
<div class="vip-login-title">本站会员特惠</div>
<div class="vip-login-subtitle">限时2023年10月8日至12月25日<br></div>
<div><a href="/shop/3191" rel="external nofollow" class="vip-login-btn">了解详情</a></div>
<div class="close"><svg class="ic-close" viewBox="0 0 1024 1024"><path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path></svg></div>
</div>
</div>
</div>
<script>
var today = new Date().toDateString();
var isClosed = localStorage.getItem('popupClosed');
if (isClosed !== today) {
var closeButtons = document.getElementsByClassName('close');
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', function() {
this.parentNode.style.display = 'none';
localStorage.setItem('popupClosed', today);
});
}
} else {
var jiRow = document.querySelector('.Ji-row');
if (jiRow) {
jiRow.style.display = 'none';
}
}
</script>
<style>
@media (max-width:800px) {
.Ji-col {
display:none;
}
}.vip-login-tip {
position:relative;
box-sizing:border-box;
padding:18px 10px 22px 20px;
width:400px;
height:175px;
border-radius: 10px;
background-position:right 50%;
background-repeat:no-repeat;
background-size:180px;
background-color:#fff;
box-shadow: 0px 0px 20px 0px #00000020;
}
.vip-login-countdown-row {
display:flex;
align-items:center
}
.red_p{
color: red;
}
.vip-login-countdown-row i {
color:var(--header-color);
font-size:18px
}
.vip-login-countdown-row .countdown-lable {
margin:0 3px 0 4px;
font-size:14px;
line-height:16px
}
.vip-login-countdown-row .counddown-wrap {
font-size:14px
}
.vip-login-title {
width:218px;
margin:10px 0;
font-weight:600;
font-size:16px;
line-height:22px;
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
text-overflow:-o-ellipsis-lastline;
text-overflow:ellipsis;
word-break:break-word!important;
word-break:break-all;
line-break:anywhere;
-webkit-line-clamp:1
}
.vip-login-subtitle {
width:218px;
color:var(--text2);
font-size:14px;
line-height:20px;
display:-webkit-box;
color:#8e8e8e;
overflow:hidden;
-webkit-box-orient:vertical;
text-overflow:-o-ellipsis-lastline;
text-overflow:ellipsis;
word-break:break-word!important;
word-break:break-all;
line-break:anywhere;
-webkit-line-clamp:3
}
.vip-login-btn {
margin-top:10px;
display:inline-block;
height:40px;
width:160px;
line-height:40px;
text-align:center;
border-radius:8px;
color:#fff;
background-color:#00b2ff;
transition:background-color .3s,color .3s;
font-weight:600;
cursor:pointer
}
.close {
position:absolute;
top:7px;
right:7px;
cursor:pointer
}
.Ji-row {
position:fixed;
bottom:30px;
right:80px;
z-index:10;
display:flex;
justify-content:right;
}
.vip-login-countdown-row .counddown-wrap span {
display:inline-block;
margin:0px 4px;
width:20px;
font-size:13px;
height:18px;
color:var(--header-color);
border-radius:5px;
text-align:center;
line-height:18px;
font-weight:500px;
background:var(--header-color)
}
svg.ic-close {
width: 20px;
height: 20px;
}
</style>

至于怎么去掉倒计时,把最开始的script代码部分注释掉或者删掉都行!

B2主题添加右下角会员活动弹窗

版权声明 1 本站永久网址:https://www.gzkj8.com
2 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长:yixinis@163.com,进行删除处理。
3 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
SEO优化文章资讯

网站内容编纂须要运营SEO优化技能吗?

2023-12-11 11:27:19

WordPress教程文章资讯

B2主题 圈子首页加上轮播图

2023-12-16 13:36:24

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索