Number Animate--JS快速改变页面数字变化过程动画

Animate–JS快速改变页面数字变化过程动画

通过定时器,快速修改页面上数字,页面初始化时常用功能。

1
2
3
4
// 判断是否是数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
*判断一个数有几位小数
*@param {number} number
*/
function getDecimalPoint(number) {
if(!isNumeric(number)) {return;}
var num = parseFloat(number);
var str = num.toString();
var x = str.indexOf('.');
if (x > -1) {
return str.length - x - 1;
} else {
return 0;
}
}
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
/**
* 快速改变页面数字,数字增加过程
* @param {string} selector 可以被jquery选中的选择器(标签内不应有除了数字以外其他内容)
* @param {Object} param1
* {
* duration: 数字变化过程的时间 默认:2000sm,
* timeStep: 变化间隔时间 默认: 50ms,
* start: 数字变化起始值,
* end: 数字变化最终值
* }
*/
function ChangeDomNum(selector, _ref) {
var start = _ref.start,
end = _ref.end,
duration = _ref.duration,
timeStep = _ref.timeStep;

if (
(duration && !isNumeric(duration)) ||
(timeStep && !isNumeric(timeStep)) ||
!isNumeric(start) ||
!isNumeric(end) ||
start === end
) {
return false;
} else {
duration = parseFloat(duration);
timeStep = parseFloat(timeStep);
start = parseFloat(start);
end = parseFloat(end);
}

var timeStepRel = timeStep || 50;
var startRel = start || 0;
var duringRel = duration || 2000;
var result = startRel;
var decimalPonit = Math.max(getDecimalPoint(end), getDecimalPoint(start)); // 几位小数

var timeCount = Math.ceil(duringRel / timeStepRel);
var step = parseFloat(((end - startRel) / timeCount).toFixed(decimalPonit));
var timer = null;
timer = setInterval(function () {
result += step;

if (step > 0 && result >= end) {
result = end;
clearInterval(timer);
timer = null;
} else if (step < 0 && result <= start) {
result = start;
clearInterval(timer);
timer = null;
}

$(selector).text(result.toFixed(decimalPonit));
}, timeStepRel);
}

调用:

1
2
3
4
5
// 调用:
changeDomNum(
'#downloadsNum',
{start: 0, end: 123.5, duration: 2000, timeStep: 50}
);

效果:


欢迎关注我的公众号,公众号将第一时间更新angular教程:


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!