子比主题功能 – 活动倒计时悬浮弹窗通知代码-小新轻创

效果预览

分别有带倒计时版本和不带倒计时版本两个，放自定义顶部或底部html都可以，也可以放文件里，都随意

#1 倒计时版

倒计时版 [点击折叠/展开]

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

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

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

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

#2 无倒计时版

无倒计时版 [点击折叠/展开]

Html

CSS

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

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

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

如需要将会员开通修改为指定链接请搜索下方代码并修改

<a href="javascript:;" class="vip-login-btn pay-vip">
修改为
<a href="链接地址" class="vip-login-btn">

版权声明 1 本站名称： 小新轻创
2 本站网址：fx.xxqcy.xyz
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END

子比美化 Wordpress WordPress教程子比美化
# 子比美化