user5307298 user5307298 - 7 months ago 13
Javascript Question

How to start counter from 0 rather than maximum value?

I have created a jquery number counter which displays maximum value (the value written in HTML) and increases the number by one to attain maximum value when you click on the body of page. But when the page loads, the number displayed always to maximum value. I want the number to be equal to zero when it loads first time. Here's my code:

HTML

<div class="mydiv"><span class="count">100</span></div>
<div class="mydiv"><span class="count">200</span></div>
<div class="mydiv"><span class="count">300</span></div>


CSS

.mydiv {
width:100px;
height:100px;
background:red;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
float:left;
margin:5px;
}

.count {
line-height:100px;
color:white;
margin-left:30px;
font-size:25px;
}


JS

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


I am giving demo here.

Answer

Use a data- attribute to set max value other that the html. Then you can set the html as 0.

$(document).ready(function() {
  $(window).click(function() {
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).data('limit')
      }, {
        duration: 4000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
  });
});
.mydiv {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  float: left;
  margin: 5px;
}

.count {
  line-height: 100px;
  color: white;
  margin-left: 30px;
  font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="mydiv"><span class="count" data-limit="100">0</span></div>
<div class="mydiv"><span class="count" data-limit="200">0</span></div>
<div class="mydiv"><span class="count" data-limit="300">0</span></div>

DEMO

Comments