CountUp.js

/**
 * 数字滚动
 */
module.exports = class CountUp {
  constructor ({speed = 1350, refreshInterval = 100, decimals = 0, formatter = this._formatter} = {}) {
    this.speed = speed // 从起始值到目标值到时间
    this.refreshInterval = refreshInterval // 更新间隔
    this.loops = this._getLoops()// 循环次数
    this.decimals = decimals // 保留几位小数
    this.formatter = formatter
    this.onUpdate = null
    this.onComplete = null
  }
 
  start ({from = 0, to = 0} = {}, onUpdate) {
    this.from = from
    this.to = to
    this.value = from
    this.loopCount = 0 // 循环计数器
    this.increment = this._getIncrement() // 每次更新的增量
    this.onUpdate = onUpdate
    this._updateTimer()
  }
 
  _formatter (value, decimals) {
    return value.toFixed(decimals);
  }
 
  _getLoops () {
    return Math.ceil(this.speed / this.refreshInterval)
  }
 
  _getIncrement () {
    return (this.to - this.from) / this.loops
  }
 
  _updateTimer () {
    this.value += this.increment
    this.loopCount++
    if (this.onUpdate) this.onUpdate(this.formatter(this.value, this.decimals))
    if (this.loopCount >= this.loops) {
      this.value = this.to
      clearInterval(this.timer)
      if (this.onComplete) this.onComplete()
      return
    }
    this.timer = setTimeout(() => {
      this._updateTimer()
    }, this.refreshInterval)
  }
}

/**
 * 数字滚动
 */
const Countdown = require('./countdown');
module.exports = class CountUp {
  constructor ({speed = 1350, refreshInterval = 100, decimals = 0, formatter = this._formatter} = {}) {
    this.speed = speed; // 从起始值到目标值到时间
    this.refreshInterval = refreshInterval; // 更新间隔
    this.loops = this._getLoops();// 循环次数
    this.decimals = decimals; // 保留几位小数
    this.formatter = formatter;
    this.onComplete = null;
  }
 
  start ({from = 0, to = 0} = {}, onUpdate) {
    this.from = from;
    this.to = to;
    this.value = from;
    this.increment = this._getIncrement(); // 每次更新的增量
    this.countdown = new Countdown(this.increment);
    this.countdown.start(this.to, () => {
      onUpdate(this.formatter(this.value, this.decimals));
      this.value += this.increment;
      console.log(this.value)
    })
    this.countdown.onFinish = () => {
      if (this.onComplete) this.onComplete()
      this.countdown.cancel()
    }
  }
 
  _formatter (value, decimals) {
    return value.toFixed(decimals);
  }
 
  _getLoops () {
    return Math.ceil(this.speed / this.refreshInterval)
  }
 
  _getIncrement () {
    return (this.to - this.from) / this.loops
  }
};

/**
 * 数字滚动
 */
const Countdown = require('./countdown')
module.exports = class CountUp {
  constructor ({speed = 1350, refreshInterval = 100, decimals = 0, formatter = this._formatter} = {}) {
    this.speed = speed // 从起始值到目标值到时间
    this.refreshInterval = refreshInterval // 更新间隔
    this.loops = this._getLoops()// 循环次数
    this.decimals = decimals // 保留几位小数
    this.formatter = formatter
  }
 
  start ({from = 0, to = 0} = {}, onUpdate) {
    this.from = from
    this.to = to
    this.value = from
    this.increment = this._getIncrement() // 每次更新的增量
    const countdown = new Countdown(this.refreshInterval);
    countdown.start(this.speed, (cd) => {
      this.value += this.increment
      if (onUpdate) onUpdate(this.formatter(this.value, this.decimals))
    })
    countdown.onFinish = () => {
      if (onUpdate) onUpdate(this.formatter(this.to, this.decimals))
    }
  }
 
  _formatter (value, decimals) {
    return value.toFixed(decimals);
  }
 
  _getLoops () {
    return Math.ceil(this.speed / this.refreshInterval)
  }
 
  _getIncrement () {
    return (this.to - this.from) / (this.loops + 1)
  }
}