欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-16 21:20:34
...

最近有一个需求就是:要求显示两个数之间的匀速滚动效果。一开始我是直接从网上找了一个插件,但是这个插件并不是匀速滚动的,这就导致当页面刷新后显示的数字不是刷新之前的,这样肯定不行啊,那么我们就思考将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看成常量就行了。