文章
文章用户商铺文档快讯圈子网址导航

网站左下角通知弹窗区块分享

本文共 9526 个字，预计阅读时间需要 24 分钟。

本代码html结构羊 已经优化 可以 直接C V

网站左下角通知弹窗区块分享

源代码

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

b2主题需要在

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

下面增加

<div class="close"><i class="b2font b2-close-line"></i></div>

才有 X 的关闭按钮

优化版本

左上角一键复制到 footer.php 文件内 （必须在 body标签内 ）

网站左下角通知弹窗区块分享
<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/02/10");
            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 class=""><em class="color-em">2024年春节</em>仅剩</span> 
            <div>
            <span class="djsspan">${d}</span> 天
            <span class="djsspan">${h}</span> 时
            <span class="djsspan">${m}</span> 分
            <span class="djsspan">${s}</span> 秒
            </div>`;


            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://pic.yyds3.top/R50Hlo.png);">
            <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">所有的伟大，都源于一个勇敢的开始</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 closeButtons = document.getElementsByClassName('close');
    for (var i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener('click', function () {
            this.parentNode.style.display = 'none';
        });
    }
</script>
<style>
    .countdown-lable {
        margin: 0 3px 0 4px;
        font-size: 14px;
        line-height: 16px;
    }

    @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 1vh;
        background-repeat: no-repeat;
        background-size: 178px;
        background-color: #fff;
        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
    }

    .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: 230px;
        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: #fb7299;
        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;
    }

    svg.ic-close {
        width: 20px;
        height: 20px;
    }

    .color-em {
        color: #fe2c55;
        padding: 0px 5px;
    }

    .djsspan {
        display: inline-block;
        margin: 0px 4px;
        width: 20px;
        font-size: 13px;
        height: 18px;
        color: #fe2c55;
        border-radius: 5px;
        text-align: center;
        line-height: 18px;
        font-weight: 500px;
        background: rgba(254, 44, 85, 0.2);
        ;
    }
</style>

子主题

有子主题的建议css跟html js 分开这样更好管理

 .countdown-lable {
        margin: 0 3px 0 4px;
        font-size: 14px;
        line-height: 16px;
    }

    @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 1vh;
        background-repeat: no-repeat;
        background-size: 178px;
        background-color: #fff;
        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
    }

    .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: 230px;
        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: #fb7299;
        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;
    }

    svg.ic-close {
        width: 20px;
        height: 20px;
    }

    .color-em {
        color: #fe2c55;
        padding: 0px 5px;
    }

    .djsspan {
        display: inline-block;
        margin: 0px 4px;
        width: 20px;
        font-size: 13px;
        height: 18px;
        color: #fe2c55;
        border-radius: 5px;
        text-align: center;
        line-height: 18px;
        font-weight: 500px;
        background: rgba(254, 44, 85, 0.2);
        ;
    }
版权声明
作者: 大绵羊
文章标题: 网站左下角通知弹窗区块分享
声明: 本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，发布本站内容到任何网站。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理
温馨提示: 本文最后更新于2023年11月13日 17:50:50,一些文章的可能已经失效。

给TA给糖
共{{data.count}}人
人已给糖
源码分享站长作品

复刻CSDN外链跳转UI

2023-10-11 22:55:00

源码分享

Better Popup更好的弹窗-WordPress 美化

2023-12-3 9:36:23

0 条回复 A文章作者 M管理员
表情包
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部