javascript - 计数器不会在页面加载时开始计数

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>