甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
用es6语法方式写了个微信小程序小插件–数字滚动；
成都创新互联公司是一家集网站建设,奎屯企业网站建设,奎屯品牌网站建设,网站定制,奎屯网站建设报价,网络营销,网络优化,奎屯网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
效果图：
wxml页面布局代码：
{{num1}}{{num1Complete}} {{num2}}{{num2Complete}} {{num3}}{{num3Complete}}
index.js调用NumberAnimate.js
// pages/main/index.jsimport 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:" 完成了"
});
}
});
}})NumberAnimate.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.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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。