微信小程序数字累加动态效果完善

时间：2024-03-03 16:18:55

问题描述：最近做了个关于记事的微信小程序，结果因为是个人主体，没给审核通过，看来还是自己用吧。。。里面涉及到了一个数字累加的效果实现，百度到了一篇 http://www.wxapp-union.com/thread-1694-2-1.html，挺好使，有个问题就是如果是整数，并且数字不是很大的情况下，会中间过程一直是0，然后最后时候直接变成最终数字，没有了中间过程。

解决办法：看了看js，增加了一个固定的累加值取整，而不是继续在原来已经有误差（多次取整）的基础上再次取整，总的说就是增加了个参数

/**
 * Created by wangyy on 2016/12/26.
 */
\'use strict\';
class NumberAnimate {

  constructor(opt) {
    let def = {
      from: 50, //开始时的数字
      speed: 2000, // 总时间
      refreshTime: 100, // 刷新一次的时间
      decimals: 2, // 小数点后的位数
      onUpdate: function() {}, // 更新时回调函数
      onComplete: function() {} // 完成时回调函数
    }
    this.tempValue = 0; //累加显示变量值
    this.tempRealValue = 0; //累加真实变量值
    this.opt = Object.assign(def, opt); //assign传入配置参数
    this.loopCount = 0; //循环次数计数
    this.loops = Math.ceil(this.opt.speed / this.opt.refreshTime); //数字累加次数
    this.increment = (this.opt.from / this.loops); //每次累加的值
    this.interval = null; //计时器对象
    this.init();
  }
  init() {
    this.interval = setInterval(() => {
      this.updateTimer()
    }, this.opt.refreshTime);
  }

  updateTimer() {
    this.loopCount++;
    //增加固定值记录
    this.tempRealValue = this.formatFloat(this.tempRealValue, this.increment);
    this.tempValue = this.tempRealValue.toFixed(this.opt.decimals);
    if (this.loopCount >= this.loops) {
      clearInterval(this.interval);
      this.tempValue = this.opt.from;
      this.opt.onComplete();
    }
    this.opt.onUpdate();
  }
  //解决0.1+0.2不等于0.3的小数累加精度问题
  formatFloat(num1, num2) {
    let baseNum, baseNum1, baseNum2;
    try {
      baseNum1 = num1.toString().split(".")[1].length;
    } catch (e) {
      baseNum1 = 0;
    }
    try {
      baseNum2 = num2.toString().split(".")[1].length;
    } catch (e) {
      baseNum2 = 0;
    }
    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
    return (num1 * baseNum + num2 * baseNum) / baseNum;
  };
}
export default NumberAnimate;

 再来一张小程序截图，弄个认证又300大洋，对机会吧。。。

相关文章