简单写一个通知栏的自动向上滚动及活动倒计时完整代码

效果图：

 

 

 

 html:

        <div class="notice">
            <div class="rongqi">
                <p v-for="(item, index) in paymember" :key="index">
                    <img :src="item.upic" alt="">
                    <span> &nbsp恭喜 <span>{{item.name}}</span> 完成会员激活</span>
                </p>
            </div>
        </div>

css:

        .notice {
            width: 12.820rem;
            height: 1.4957rem;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 0.745rem;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            top: 0.5rem;
            overflow: hidden;
        }

        .notice .rongqi {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            transition: 0.5s;
        }

        .notice p {
            margin: 0 auto;
            height: 1.4957rem;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .notice p img {
            width: 1.025rem;
            height: 1.025rem;
            border-radius: 50%;
        }

        .notice p span {
            font-size: 0.598rem;
            color: #FFFFFF;
        }

        .notice p span span {
            color: #FFD613
        }

js:

if (res.body.code == 200) {
                        var data1 = []
                        data1.push(res.body.data[0]) //拿到接口数据之后，把第一个元素拼接到数组最后面
                        this.paymember = res.body.data.concat(data1)
                        // 通知栏滚动
                        var notice = document.querySelector('.notice')
                        var rongqi = notice.querySelector('.rongqi')
                        var temb = 0 //移动步数
                        setInterval(() => {
                            clearTimeout(timer) 
                            rongqi.style.transition = 0.5 + 's'
                            temb += 1
                            // 移动一次的距离为1.4957rem（每个list的高度）
                            rongqi.style.top = -1.4957 * temb + 'rem'
                            var top = rongqi.style.top.replace('rem', '')
                            var timer = setTimeout(() => {  //当走到最后一张的时候跳到第一张，这里要加一个定时器，不加的话最后一下没滚动的视觉效果，让他延迟一会再跳第一张
                                // 移动步数等于数组长度减1的时候(最后一张)，清除动画，瞬间回到第一张
                                if (temb == this.paymember.length - 1) {
                                    rongqi.style.transition = 0 + 's' //去掉动画
                                    temb = 0 //步数清零
                                    rongqi.style.top = 0 //跳到第一张，由于动画清除了，客户看不见
                                }
                            }, 1000)
                        }, 3000)
                    } else {
                        console.log('code is not 200')
                    }

通知栏滚动整体思路：跟轮播图一个思路，把第一个元素拼接到最后，当滚动到最后的时候，清除动画，瞬间跳到第一张，由于第一张和最后一张一样，客户无感。

 

倒计时：

 

 类似这种倒计时，之前我写过笔记，但没给例子，这里把图贴上，样式代码就不写了，直接贴上完整js代码：

// 优惠倒计时
            var str = "2021/02/18 00:00:00";  //活动要截至的时间
            var endDate = new Date(str);
            var endDate = endDate.getTime();
            setInterval(() => {
                var nowdate = new Date().getTime()
                var t = endDate - nowdate
                if (t) {
                    var d = Math.floor(t / 1000 / 3600 / 24);
                    var h = Math.floor((t / 1000 / 60 / 60) % 24);
                    var m = Math.floor((t / 1000 / 60) % 60);
                    var s = Math.floor((t / 1000) % 60);
                }
                this.lefttime = `${d}天${h}时${m}分${s}秒`
            }, 1000)