NumberAnimate.js
1.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* 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;