【vue】 vue2 | js 实现数字滚动效果

效果

vue 代码

<template>
  <div class="outer">
    <div class="counter-container">
      <i class="iconfont icon-Basket-Ball" style="font-size: 50px"></i>
      <div class="counter" :data-set="num1"></div>
      <span>法律文献</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-BasketballHoop" style="font-size: 50px"></i>
      <div class="counter" :data-set="num2"></div>
      <span>司法规章</span>
    </div>

    <div class="counter-container">
      <i class="iconfont icon-assistant" style="font-size: 50px"></i>
      <div class="counter" :data-set="num3"></div>
      <span> 交通规章</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num1: 37062,
      num2: 37062,
      num3: 37062,
    };
  },
  mounted() {
    this.startFn();
  },
  methods: {
    startFn() {
      let counters = document.querySelectorAll(".counter"); //获取到三个counter盒子
      counters.forEach((item) => {
        item.innerText = "0"; //记录分数变化的变量，初始值为0
        const updateData = () => {
          const data = +item.getAttribute("data-set"); //获取到元素中绑定的数据
          const tmp = +item.innerText; //临时变量保存变化一次的数据量
          const changeData = data / 100; //设置改变的速率
          if (tmp < data) {
            //如果临时变量的值小于最终数据的值，那么就给元素进行数据相加
            item.innerText = `${Math.ceil(tmp + changeData)}`; //值数相加，然后进行取整
            setTimeout(updateData, 1); //定时器传入回调函数目的在于动态变化
          } else {
            item.innerText = data; //不满足条件后，证明得到了最终数据，直接渲染
          }
        };
        updateData(); //调用函数，启动函数
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.outer {
  background-color: #033f8b;
  color: #fff;
  font-family: "Roboto Mono", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  overflow: hidden;
  margin: 0;
}

.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 30px 50px;
}

.counter {
  font-size: 60px;
  margin-top: 10px;
}

@media (max-width: 580px) {
  .outer {
    flex-direction: column;
  }
}
</style>