通过定时器,快速修改页面上数字变化。
// 判断是否是数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
/**
*判断一个数有几位小数
*@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;
}
}
/**
* 快速改变页面数字,数字增加过程
* @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);
}
调用:
// 调用:
changeDomNum(
'#downloadsNum',
{start: 0, end: 123.5, duration: 2000, timeStep: 50}
);
效果: