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

时间:2017-08-01 05:06:08

标签: javascript html css

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

foreach($master->spesimen  as $spesimen){
                        $data_spesimen = array(
                            "indexspec" => $spesimen->indexspec,
                            "namafile" => $spesimen->nama,
                            "nama" => $spesimen->nama,
                            "imgspec" =>  base64_decode($spesimen->namafile),
                            "ref_mfpp" => $kode,
                            "useri" => $username
                        );
                        $this->kirim->specfpp($data_spesimen);
                    }  

1 个答案:

答案 0 :(得分:1)

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

您需要添加jQueryCountTo库,如代码段所示。然后使用函数$('.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>
&#13;
&#13;
&#13;