Question

我创建了一个jquery数字计数器，它显示最大值（用HTML编写的值）并将数字增加一，以便在单击页面主体时达到最大值。但是当页面加载时，显示的数字始终为最大值。我希望第一次加载时数字等于零。这是我的代码：

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

我正在演示here。

Answer 1

使用data-属性设置html以外的最大值。然后你可以将html设置为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

如何从0开始计数而不是最大值？

1 个答案: