在Angular中制作大屏数字滚动效果

目录

前言

一、效果

二、制作步骤

---

前言

在工作中总会制作数据大屏,而数字的滚动也是其中常用的,最近学习到一种使用js方法和css来制作数字滚动的效果

一、效果

数字滚动效果

二、制作步骤

HTML:

 <ng-container *ngFor="let item of numberList">
                <div class="number1">
                    <!-- 是数字就滚动 -->
                    <span *ngIf="!getIsNaN(item); else not"> <i #numberInfo>0123456789</i> </span>
                    <!-- 不是数字就用逗号 -->
                    <ng-template #not>
                        <span *ngIf="getIsNaN(item)">{{ item }}</span></ng-template
                    >
                </div>
            </ng-container>

TS:1.先获取一组随机的数字,将数字转换为8位数,不足8位数在前面补0,且以显示金额的形式显示,最后转换为数组且每三位数以逗号隔开 

2.再通过viewchildren获取模板变量为numberInfo的元素,将其转换为数组,就得到了一个数组中全是符合条件的元素,

3.筛选出为数字的值的数组,进行for循环,条件是index=0且index小于符合条件的数组长度,index++,这样就可以对获取到的随机数字每一位进行数字的偏移,视觉上就是数字的滚动效果

 numberList = [];
    timer: any;

    //是否为非数字
    getIsNaN(number: any) {
        return isNaN(number);
    }
    // 生成0-99999999随机数
    getRandomNumber() {
        //Math.pow(底数x,指数y) 10的8次方
        //Math.random 大于等于0小于1的随机数
        //Math.floor 返回小于或等于一个给定数字的最大整数
        return Math.floor(Math.random() * Math.pow(10, 8));
    }

    //数字补0且数字转换为金额的格式
    toOrderNum(num: any) {
        num = num.toString();
        // 把订单数变成字符串
        if (num.length < 8) {
            num = '0' + num; // 如未满八位数，添加"0"补位
            this.toOrderNum(num); // 递归添加"0"补位 直到长度大于8
        } else if (num.length === 8) {
            // 数中加入逗号
            num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8);
            this.numberList = num.split(''); // 将其便变成数据，渲染至滚动数组
        } else {
        }
    }

//获取符合的所有元素
    @ViewChildren('numberInfo') numberInfo!: QueryList<ElementRef>;

//每隔2秒就重新获取一组数字
    increaseNumber() {
        this.timer = setInterval(() => {
            this.toOrderNum(this.getRandomNumber());
            this.setNumberTransform();
        }, 2000);
    }

    // 设置每一位数字的偏移
    setNumberTransform() {
        let numberItems = this.numberInfo.toArray();
        let numberArr = this.numberList.filter((item: any) => !isNaN(item));
        for (let index = 0; index < numberItems.length; index++) {
            let elem = numberItems[index];
            elem.nativeElement.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
        }
    }

 ngAfterViewInit() {
        this.increaseNumber();
    }

SCSS:

  .number1 {
                display: inline-block;
                width: 20px;
                height: 36px;
                font-size: 30px;
                line-height: 36px;
                & > span {
                    position: relative;
                    display: inline-block;
                    margin-right: 5px;
                    width: 100%;
                    height: 100%;
                    writing-mode: vertical-rl; //垂直方向自右而左的书写方式。
                    text-orientation: upright; //此值自然地设置水平脚本的字符(直立)，以及垂直脚本的字形。它使所有字符都被视为从左到右。
                    overflow: hidden;//超出的部分数字进行隐藏

                    & > i {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translate(-50%, 0);
                        transition: transform 1s ease-in-out;
                        letter-spacing: 10px;
                    }
                }
            }
        }
    }