Testo
3300Testo
200Testo
20550Testo
3300Testo
200Testo
20550.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));
}
});
});
}