How to start counter from 0 rather than maximum value?

Sachin Published at Dev

Sachin

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;
}

$(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.

rrk

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

Collected from the Internet

Please contact [email protected] to delete if infringement.