Save the following code in a file and name it countUp.js
/** CountUp JS
* Number.prototype.format(n, x)
*
* @param integer n: length of decimal
* @param integer x: length of sections
*/
Number.prototype.format = function(n, x) {
var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};
function animateValue(id, start, end, duration) {
// assumes integer(whole) values for start and end
var obj = document.getElementById(id);
var range = end - start;
// no timer shorter than 50ms (not really visible any way)
var minTimer = 50;
// calc step time to show all interediate values
var stepTime = Math.abs(Math.floor(duration / range));
// never go below minTimer
stepTime = Math.max(stepTime, minTimer);
// get current time and calculate desired end time
var startTime = new Date().getTime();
var endTime = startTime + duration;
var timer;
function run() {
var now = new Date().getTime();
var remaining = Math.max((endTime - now) / duration, 0);
var value = Math.round(end - (remaining * range));
obj.innerHTML = value.format();
if (value == end) {
clearInterval(timer);
}
}
timer = setInterval(run, stepTime);
run();
}
Make sure to include the script if it is stored in a separete JS file.
HTML : <span id=”number” data-attr=”100″ >0</span>
Calling the file and making use of it :
var el = $("#number");
if (el.length) {
var val = el.attr("data-attr");
animateValue(el, 0, parseInt(val), 4000);
}
Please follow and like us: