使用Vue3和JavaScript 实现数字实时动态滚动

记录实现营业额的数字实时动态滚动的实现过程
参考文献：
1.如何实现大屏数字滚动效果
2.vue过滤器方法 数字每3位数加（ , ）

1.效果预览

2.实现思路

2.1 准备工作

• 给定一个数字： 1495959，将其转化为带分隔逗号的形式：1,495,959
• 通过computed，记录数字转换转换为的数组：["1",",","4","9","5",",","9","5","9"]

2.2 循环数字数组产生数字

• 数字素材是一个长条形的0-9，如下图。
  
• 先循环遇到，就产生一个黄色的逗号，遇到数字就产生一个div，背景是给的数字素材
• 数组中item的数字使用translateY(-${item*90}px)偏移到对应数字就可以了。

2.3 美化

• 调整为数字右对齐，这样数字位数增加时比较自然

  display: flex;
  justify-content: end;

• 将数字div多余部分隐藏

  overflow: hidden; // 隐藏内容

• 添加数字滚动动画效果

  transition: all 1.2s ease-out;

2.4 测试

设置一个定时器，每两秒增加num的值。
增加时，先将包含逗号的值替换为数字，在加一个1-100之间随机数，再变为包含逗号的值。
1,495,959–> 1495959+10—>1,495,969

3.源代码

<script setup>
import { computed, ref } from 'vue'
let num = 1495959
let start = ref(toThousandFilter(num))
const numArray = computed(() => { return (start.value+'').split('') || 0})

setInterval(function() {
  let num =  start.value.replaceAll(',','')
  start.value = toThousandFilter(num*1.0+random(1,100)) 
},2000)
// 千分位加逗号
function toThousandFilter(num) {
  return (+num || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
}
// 产生随机数
function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
</script>

<template>
  <div class="page-main" >
    <div class="split-symbol">
      ￥
    </div>
    <div  v-for="(item, index) in numArray" :key="index">
        <div class="split-symbol" v-if="item == ','">
          ,
        </div>
        <div class="num-item" :style="{transform: `translateY(-${item*90}px)`}">         
        </div >
    </div>
  </div>  
</template>

<style scoped lang="less">
.page-main{
  width: 600px;
  height:90px;
  background-color: black;

  display: flex;
  justify-content: end;
  overflow: hidden; // 隐藏内容
  
  .num-item{
    width: 36px;
    height:1499px;
    background: url('../assets/num.png') no-repeat;
    background-size: 100% 60%;
    transition: all 1.2s ease-out;
  }
  .split-symbol{
    color: yellow;
    font-size: 44px;
    width: 36px;
    height:90px;
    line-height: 90px;
    font-weight: bold;
  }
}
</style>

---

春赏百花冬观雪，醒亦念卿梦亦念卿