js实现数字跳动到指定数字(小数、大数据都适用)

1、先上图


动画12.gif

2、技术代码(复制粘贴,直接使用)

/**
     * start:起始数据
     * end:最终数据
     * time:动画时间
    * */
jumpNumber(start, end, time) {
      this.num = start
      let endNum = end
      let lastNum = ''  //小数
      let digit = 0 //小数位数
      let step = 0  //累加步长
      const len = parseInt(end).toString().length
      //判断是小数
      if(parseInt(end) !== end) {
        endNum = parseInt(end)
        lastNum = end.toString().split('.')[1]
        digit = lastNum.length
      }
      const timer = setInterval(() => {
        if(this.num < (endNum - step)) {
          step++
          //小数
          let point = this.getRandomNum(digit)
          //数据过大,后面几位数随机跳动
          if(len >= 6) {
            let bigNumber = this.getRandomNum(len - 3)
            const leng = parseInt(start).toString().length
            const length = leng - bigNumber.length
            //截取岁随机数前面的数
            const cur = length <= 0 ? parseInt(start) : parseInt(start.toString().slice(0, length))
            start = cur + step + bigNumber + '.' + point
          } else {
            start = parseInt(start) + step + '.' + point
          }
          this.num = parseFloat(start)
        } else {
          clearInterval(timer)
          this.num = end
        }
    }, time)
},
getRandomNum(len) {
    let point = ''
    for(let i = 1; i <= len; i++) {
      point = point + parseInt(Math.random() * 10)
    }
    return point
  }

3、使用
this.jumpNumber(0, 128.456, 50)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容