JSFiddle - React, Tailwind, and code Playground
by ClaraCode
HTML
<span class="count">12.000</span><br>
<span class="count">1,20</span><br>
<span class="count">1.000</span>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.count').counterUp({
delay: 112,
time: 3000
});
});
</script>
JavaScript
/*!
* jquery.counterup.js 1.0
*
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
* Released under the GPL v2 License
*
* Date: Nov 26, 2013
*/
(function( $ ){
"use strict";
$.fn.counterUp = function( options ) {
// Defaults
var settings = $.extend({
'time': 400,
'delay': 10
}, options);
return this.each(function(){
// Store the object
var $this = $(this);
var $settings = settings;
var counterUpper = function() {
var nums = [];
var divisions = $settings.time / $settings.delay;
var num = $this.text();
var isComma = /[0-9]+.[0-9]+/.test(num);
num = num.replace(/\./g, '');
var isInt = /^[0-9]+$/.test(num);
var isFloat = /^[0-9]+,[0-9]+$/.test(num);
var decimalPlaces = isFloat ? (num.split(',')[1] || []).length : 0;
// Generate list of incremental numbers to display
for (var i = divisions; i >= 1; i--) {
// Preserve as int if input was int
var newNum = parseInt(num / divisions * i);
// Preserve float if input was float
if (isFloat) {
newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
}
// Preserve commas if input had commas
if (isComma) {
while (/(\d+)(\d{3})/.test(newNum.toString())) {
newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+'.'+'$2');
}
}
nums.unshift(newNum);
}
$this.data('counterup-nums', nums);
$this.text('0');
// Updates the number until we're done
var f = function() {
$this.text($this.data('counterup-nums').shift());
if ($this.data('counterup-nums').length) {
...