vue实现数字滚动效果并匀速滚动

最新推荐文章于 2025-07-02 14:19:24 发布

原创最新推荐文章于 2025-07-02 14:19:24 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#数字滚动效果 #vue　数字滚动效果 #数字匀速滚动效果

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了一种在网页上实现数字从一个值匀速滚动到另一个值的算法。通过计算时间差和速度，确保了数字变化过程中的均匀过渡，适用于需要精确控制数值展示动画的场景。

最近有一个需求就是：要求显示两个数之间的匀速滚动效果。一开始我是直接从网上找了一个插件，但是这个插件并不是匀速滚动的，这就导致当页面刷新后显示的数字不是刷新之前的，这样肯定不行啊，那么我们就思考将24小时分成若干等份来计算，下面直接贴代码：

  // 滚动效果数值计算
    getTimeDatas(start, end) {
      console.log(start, end, 9653)
      // 计算差值
      var res = Number(end - start)
      // 转化成毫秒
      var curTime = Number(this.configData.cur_time) * 1000
      // 计算秒的配速
      var speeds = res / 86400
      // var speeds = res / 360
      // 转化成时分秒
      var time = this.$dateFmt(curTime, 'HH:mm:ss')
      // 计算之前跑了多少值，初始值
      this.startVal = this.timeToSec(time) * speeds + Number(start)
      // this.startVal = start
      this.endVal = end
      // 计算还剩多少时间
      this.durationTime = Number((86400 - this.timeToSec(time)) * 1000)
      // this.durationTime = Number(360 * 1000)
      this.beatNums()
    },
    // 时间转为秒
    timeToSec(time) {
      console.log(time, 333)
      var hour = time.split(':')[0]
      var min = time.split(':')[1]
      var sec = time.split(':')[2]
      var s = parseInt(hour * 3600) + parseInt(min * 60) + parseInt(sec)
      return s
    },
    // 数字滚动效果
    beatNums() {
      // console.log(this.startVal, this.endVal, this.durationTime, this.frequencyVal, 666610)
      this.monthRewardNums = this.startVal
      this.timersNum = setInterval(() => {
        this.monthRewardNums += (this.endVal - this.startVal) / this.durationTime * 50
        if (this.monthRewardNums >= this.endVal) {
          clearInterval(this.timersNum)
          this.monthRewardNums = this.endVal
        }
      }, 50)
    }

有些童鞋不明函数beatNums为什么要乘以50，大家把50看成常量就行了。