正在努力加载中~请稍等~

文章
文章
!
您也想出现在这里吗？ 点击联系我们吧!
当前位置：首页>源码分享>B2源码> B2主题添加右下角会员活动弹窗

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

  • B2源码
  • 发布于
  • 文章ID：2212
    • 本文共 7589个字，预计阅读全部时间需要25分17秒。
  • 编辑

本文是《免费（共164篇）》专题的第 151 篇。阅读本文前，您可以先阅读前面的一些文章：

效果图:

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

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

教程：

首先是原版的代码:

<script>
      window.onload = function () {
          countDown();
          function addZero(i) {
              return i < 10 ? "0" + i: i + "";
          }
          function countDown() {
              var nowtime = new Date();
              var endtime = new Date("此处填写截至日期格式为xxxx/xx/xx");
              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 = `活动倒计时  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
              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(此处填写图片url);">
                <div class="vip-login-countdown-row">
                    <div class="counddown-wrap">
                        <p class="count"></p>
                    </div>
                </div>
                <div class="vip-login-title">此处填写活动标题</div>
                <div class="vip-login-subtitle">此处填写活动介绍</div>
<!--此处子比用户不用动，其他主题请替换为自己的vip开通页面-->
                <div><a href="javascript:;" class="vip-login-btn pay-vip">此处填写按钮内容</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 closeButtons = document.getElementsByClassName('close');
  for (var i = 0; i < closeButtons.length; i++) {
    closeButtons[i].addEventListener('click', function() {
      this.parentNode.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-color:#fff;
background-position:right 50%;
background-repeat:no-repeat;
background-size:130px;
box-shadow:0 0 30px rgba(0,0,0,.1);
box-shadow:0px 0px 8px rgba(255,112,173,0.35);
}
.vip-login-countdown-row {
display:flex;
align-items:center
}
.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:1
}
.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:0px;
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)
}
</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/31");
              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(替换为你的图片链接);">
                <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月31日<br>永久会员仅需<small>￥</small>109</div>
                <div><a href="/vips" 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主题添加右下角会员活动弹窗

文章链接：https://sjcnh.cn/2212.html
文章标题：B2主题添加右下角会员活动弹窗
文章版权：@花醉 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！我们将在24小时内极速处理！
本文最后更新发布于2024年12月15日 23时47分13秒，某些文章具有时效性，若有错误或已失效，请在下方留言或联系：841134898@qq.com

您已阅读完《免费（共164篇）》专题的第 151 篇。您可以继续阅读该专题下面的其它文章：

本文声明 本站上的部份代码，教程，软件，插件来自会员发布以及互联网收集，不代表本站立场，仅供网友个人学习交流或测试研究使用，未经原版权作者许可，禁止用于任何商业途径！请用户仔细辨认内容的真实性，避免上当受骗！本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请在下载24小时内删除！若您喜欢本文可附上原文链接随意转载。如无意侵害了您的权益，请发送邮件至 841134898@qq.com 或点击右侧 私信：花醉 反馈，我们将尽快处理。如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，建议下载7-zip。zip、rar解压，建议下载WinRAR。

给TA赞助
共{{data.count}}人
人已赞助
2023
花醉
酒不醉人人自醉，花不迷人人自迷。
一共发布了236篇作品
!
您也想出现在这里吗？点击联系我们吧!
点击投个广告吧
共有 0 条评论
    暂无讨论，说说你的看法吧
❯
开通会员
个人中心

 有新商品 购物车

 有可用券 优惠劵
今日签到

 有新私信 私信列表

 有新消息 消息中心
快速搜索
在线客服
关注我们

  • 手机扫码打开网页

  • 微信公众号
语言切换
昼夜切换
返回顶部