计数器不会开始计数页面加载

Question

我目前正在尝试使用HTML/CSS和Javascript为网站页面上的下载和客户端总数创建一个计数器。出于某种原因，我这里的计数器甚至没有开始增加。我从一个单独的网站复制了这段代码，其中数字确实会增加。我想知道是否有人可以帮助弄清楚为什么这些数字在我进入页面后没有开始增加？

<div class="row">
<div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; right: -225px">
<div class="counter counter-small">
<span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="1000" data-comma="true" style="font-size:130%;"></span>
</div> 
<h5 class="nobottommargin" style="font-size: 150%;"><strong>Total Downloads</strong></h5>
</div>
<div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; left: -225px">
<div class="counter counter-small">
<span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="500" data-comma="true" style="font-size:130%;"></span>
</div> 
<h5 class="nobottommargin" style="font-size: 150%;"><strong>Clients</strong></h5>
</div>
</div>

Answer 1

代码正在使用 https://github.com/mhuggins/jquery-countTo

您需要添加jQuery并CountTo库，如代码片段所示。然后使用函数启动计数器$('.counter span').countTo();

$('.counter span').countTo();

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
<div class="row">
<div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; ">
<div class="counter counter-small">
<span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="1000" data-comma="true" style="font-size:130%;"></span>
</div>
<h5 class="nobottommargin" style="font-size: 150%;"><strong>Total Downloads</strong></h5>
</div>
<div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; ">
<div class="counter counter-small">
<span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="500" data-comma="true" style="font-size:130%;"></span>
</div>
<h5 class="nobottommargin" style="font-size: 150%;"><strong>Clients</strong></h5>
</div>
</div>