前端实现数字滚动增加（angular、原生js）

先上代码

@Input() value: string = ''; // 父组件传过来的参数
lastValue: string = '';  // 子组件需要展示的数字
interval: any;  // 定时器
i: number = 1;

ngOnChanges(): void {
    this.interval = setInterval(() => {
      if (this.i != 100) {  // 拆分为100份，每10毫秒加上一份，100份刚好1秒的动画
        this.i++;
        this.lastValue = parseInt((this.i * (parseInt(this.value) / 100)).toString())
        .toString()
        .replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
      } else {
        clearInterval(this.interval);
      }
    }, 10);
  }

1. ngOnChanges()是angular的钩子函数，可以理解为数据传过来就执行了这个方法；
2. lastValue是最终显示在html中的数字；
3. 后面的replace是为了实现数字的千分位分隔符。

下面是演示图片：（不管数字是否一样，都是1秒内从小变为最终值）