B2美化之侧边栏漂亮的会员优惠倒计时

美化图：

教程：

外观小工具，插入侧边栏自定义HTML，代码如下

<div class="srot-mine b2-radius" style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);"> 
                        <i class="srot-mine-bg 0"></i> 
                        <div class="sort-mine-wrap"><div class="srot-mine-tit"><img src="/pic/vipiconhover.svg" alt="" class="srot-mine-ava"> <span>会员限时折扣</span></div> <div class="timer"><ul class="timer__content">
<li class="timer__item"><p id="_d_mc" class="timer__name">天</p><span id="_d" class="timer__number">08</span></li>
<li class="timer__item"><p id="_h_mc" class="timer__name">时</p><span id="_h" class="timer__number">07</span></li>
<li class="timer__item"><p id="_m_mc" class="timer__name">分</p><span id="_m" class="timer__number">22</span></li>
<li class="timer__item"><p id="_s_mc" class="timer__name">秒</p><span id="_s" class="timer__number">51</span></li>
</ul> <a href="/vips" class="timer_btn" target="_blank">
                                会员限时折扣
                              </a></div></div>                        
                    </div>
<style>
.srot-mine {
    position: relative;
    width: 376px;
    background-image: linear-gradient(to top,#9be15d 0%,#00e3ae 100%);
    height: 180px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
}
.srot-mine {
    width: 100%;
    z-index: 2;
    margin-right: -5px;
}
.srot-mine-bg {
    position: absolute;
    top: 45px;
    right: 0px;
    width: 118px;
    height: 78px;
  
}
.sort-mine-wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 12px 16px 15px;
}
.srot-mine-tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 25px;
}
.sort-mine-wrap img {
    display: flex;
    width: auto;
}
.srot-mine-ava {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.srot-mine-tit>span {
    margin-left: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #613c14;
}
.timer {
    z-index: 1;
    color: white;
    transform: translateY(0px);
    user-select: none;
}
.timer__content {
    display: flex;
    margin-top: 20px;
}
.timer ul li{
padding:unset;
margin-top:-8px!important;
}
.timer__item:nth-child(1) {
    animation-delay: 0.2s;
}
.timer__item {
    display: flex;
    width: 25%;
    color: #f35;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    animation: item 0.6s ease backwards;
    position: relative;
    transition: all 1s 0.2s ease;
}
.timer__item:nth-child(2) {
    animation-delay: 0.4s;
}
.timer__item:nth-child(3) {
    animation-delay: 0.6s;
}
.timer__item:nth-child(4) {
    animation-delay: 0.8s;
}
.timer_btn {
    border: 0!important;
}
.timer_btn {
    position: relative;
    width: 152px;
    height: 32px;
    background-image: linear-gradient(134deg,#4d5580,#3d4466);
    font-size: 14px;
    color: #fff3eb;
    font-weight: 600;
    margin-top: 20px;
    margin: 20px auto 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.timer_btn .timer_btn_jb {
    top: -14px;
    right: -54px;
    position: absolute;
    background-image: linear-gradient(90deg,#ff9580,#f36);
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 100;
    padding: 2px 8px;
    font-size: 20px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
}
.timer__item:before {
    width: calc(100% - 5px);
    height: 60px;
    content: "";
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(5px);
    z-index: -1;
    border-radius: 10px;
    background-color: #ffffff87;
    backdrop-filter: blur(10px);
    align-items: center;
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2), inset 2px 4px 0 0 rgba(255,255,255,0.08);
}
.timer__name {
    color: #E91E63;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    bottom: 5px;
    right: 12px;
    position: absolute;
    line-height: 13px;
    text-align: center;
    letter-spacing: 0.1em;
    font-family: "Barlow Semi Condensed",sans-serif;
}
.timer__number {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    letter-spacing: 2px;
    animation: number 0.4s 1.4s ease backwards;
}
</style>
<script type="text/javascript">
        //设置定时器容器
        var countDownTimer = null ;
        //获取元素
        var day =  document.getElementById("_d");
        var hour = document.getElementById("_h");
        var minute = document.getElementById("_m");
        var second = document.getElementById("_s");
    //获取截止时间的时间戳（单位毫秒）
    var str = "2024/1/1 00:00:00"
        var inputTime = +new Date(str);
        //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
        if(day && hour && minute && second) {
            countDown();
        }
        //定时器 每隔一秒变化一次
        countDownTimer =  setInterval(countDown, 1000);
        function countDown() {
            //获取当前时间的时间戳（单位毫秒）
            var nowTime = +new Date();
            //把剩余时间毫秒数转化为秒
            var times = (inputTime - nowTime) / 1000;
            if(times > 0){
                 //计算天数
                var d = Math.floor(times/60/60/24)
                if(day){
                    day.innerHTML = d
                    //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
                    day.innerHTML = d < 10 ? "0" + d : d;
                }
                //计算小时数 转化为整数
                var h = parseInt(times / 60 / 60 % 24);
                //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
                if(hour){
                    hour.innerHTML = h < 10 ? "0" + h : h;
                }
                //计算分钟数 转化为整数
                var m = parseInt(times / 60 % 60);
                //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
                if(minute){
                    minute.innerHTML = m < 10 ? "0" + m : m;
                }
                //计算描述 转化为整数
                var s = parseInt(times % 60);
                //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
                if(second){
                    second.innerHTML = s < 10 ? "0" + s : s;
                }
            }else{
                // 停止定时器，清空定时器
                clearInterval(countDownTimer)
            }
        }
</script>