我创建了一个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。
答案 0 :(得分:3)
使用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>