JS 封装数字滚动插件

数据展示离不开数字滚动插件，今天我们从头封装个数字滚动插件：

简单绘制页面

<div class="number">0</div>
<button id="btn">开始滚动</button

按钮点击开始滚动

<script>
  let btn = document.getElementById('btn')
  let num = document.querySelector('.number')

  // 绑定点击事件
  btn.onpointerup = function (event) {
  	// 点击执行，1秒完毕，从20-500
    animationCount(1000, 20, 500, value => {
      num.innerHTML = value.toFixed(2)
    })
  }
</script>

核心方法：animationCount，先计算一个倍率，结束 - 开始 / 执行时间，利用 requestAnimationFrame 帧动画执行

/**
 * @description 数字滚动插件
 * @param {Number} duration: 滚动时长
 * @param {Number} from: 滚动开始
 * @param {Number} to: 滚动结束
 * @param {Function} callback: 回调函数
 */
function animationCount(duration, from, to, callback) {
  let speed = (to - from) / duration // 运动速率
  let startTime = new Date().getTime() // 
  let value = from
  function _run() {
    let time = new Date().getTime() - startTime
    if (time >= duration) {
      value = to
      callback && callback(value)
      return
    }
    // 变化的值，起点 + 速度 * 时间
    value = from + speed * time
    callback && callback(value)
    // 下一次变化
    requestAnimationFrame(_run)
  }
  _run()
}