matlab中累加的小程序,微信小程序学习用demo：数字累加，动态效果

微信小程序-数字累加效果，实现方式都在注释里面，有不足之处希望老司机多多指点

num.gif (77.77 KB, 下载次数: 150)

效果图

2016-12-26 18:07 上传

1、wxml代码

[HTML] 纯文本查看 复制代码

{{num1}}{{num1Complete}}

{{num2}}{{num2Complete}}

{{num3}}{{num3Complete}}

click me

2、index.js代码：

[JavaScript] 纯文本查看 复制代码// pages/main/index.js

import NumberAnimate from "../../utils/NumberAnimate";

Page({

data:{

},

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

},

onReady:function(){

},

onShow:function(){

// 页面显示

},

onHide:function(){

// 页面隐藏

},

onUnload:function(){

// 页面关闭

},

//调用NumberAnimate.js中NumberAnimate实例化对象，测试3种效果

animate:function(){

this.setData({

num1:'',

num2:'',

num3:'',

num1Complete:'',

num2Complete:'',

num3Complete:''

});

let num1 = 18362.856;

let n1 = new NumberAnimate({

from:num1,//开始时的数字

speed:2000,// 总时间

refreshTime:100,// 刷新一次的时间

decimals:3,//小数点后的位数

onUpdate:()=>{//更新回调函数

this.setData({

num1:n1.tempValue

});

},

onComplete:()=>{//完成回调函数

this.setData({

num1Complete:" 完成了"

});

}

});

let num2 = 13388;

let n2 = new NumberAnimate({

from:num2,

speed:1500,

decimals:0,

refreshTime:100,

onUpdate:()=>{

this.setData({

num2:n2.tempValue

});

},

onComplete:()=>{

this.setData({

num2Complete:" 完成了"

});

}

});

let num3 = 2123655255888.86;

let n3 = new NumberAnimate({

from:num3,

speed:2000,

refreshTime:100,

decimals:2,

onUpdate:()=>{

this.setData({

num3:n3.tempValue

});

},

onComplete:()=>{

this.setData({

num3Complete:" 完成了"

});

}

});

}

})

3、NumberAnimate.js代码：

[JavaScript] 纯文本查看 复制代码/**

* 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.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.tempValue = this.formatFloat(this.tempValue,this.increment).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;

项目地址及下载：Github地址：https://github.com/demi520/wxapp-animateNumber

2016-12-26 18:08 上传

点击文件名下载附件