Contatore di numeri - HTML, CSS, jQuery

Testo

3300

Testo

200

Testo

20550

Codice

.count-container {
            width: 200px;
            border: 1px solid #d6d7da;
            border-radius: 10px;
            font-family: arial;
            color: #333333;
            font-size: 14px;
            margin: 5px;
            display: inline-block;
            text-align: center;
            height: 100px;
            vertical-align: middle;
            background-color: #fbfcfa;
            background: -o-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
            background: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), color-stop(37%, #e3eaed), to(#c8d7dc));
            background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
        }
        .count {
            line-height: 60px;
            color: black;
            font-size: 2.0rem;
            -webkit-text-decoration: underline #f26f70;
                    text-decoration: underline #f26f70;
        }
        .count-container p {
            margin: 15px 0 0;
        }

<div class="count-container">
        <p>Testo</p>
        <span class="count update3">3300</span>
    </div>

    <div class="count-container">
        <p>Testo</p>
        <span class="count update2">200</span>
    </div>

    <div class="count-container">
        <p>Testo</p>
        <span class="count update">20550</span>
    </div>

$('.count').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        }
    });
});

jQuery(document).ready(function($) {
 
    setInterval(function() {
        updateValue();
    }, 6000);

    setInterval(function() {
        updateValue2();
    }, 8000);

    setInterval(function() {
        updateValue3();
    }, 7000);

});

function updateValue() {

    $('.update').html(Math.floor(Math.random() * (22000 - 1)) + 1);
    $('.update').each(function() {

        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

function updateValue2() {

    $('.update2').html(Math.floor(Math.random() * (1000 - 1)) + 1);
    $('.update2').each(function() {

        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

function updateValue3() {

    $('.update3').html(Math.floor(Math.random() * (4000 - 1)) + 1);
    $('.update3').each(function() {

        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}