javascript - jQuery 计数器不上去

问题描述

我的 jQuery 不工作我不知道问题出在我的代码还是我当前使用的任何 cdn 链接。我的问题：- 图标下方的数字不会从 0 变为目标数字是我的代码：-

$('.count').counterUp({
  delay: 10,
  time: 3000
});

.fact-area {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fact-box {
  box-shadow: 0 20px 50px rgba(153, 153, 153, 0.2);
}

.single-fact {
  text-align: center;
  margin: 45px 0;
  padding: 8px 16px;
  border-right: 1px solid #ddd;
}

.single-fact h2 {
  font-size: 36px;
  margin-top: 10px;
  font-weight: 500;
}

.single-fact p {
  font-size: 14px;
}

.fa-facebook-square {
  color: #3b5998;
}

.fa-instagram {
  color: #C13584;
}

.fa-twitter {
  color: #3f729b;
}

.fa-youtube {
  color: #c4302b;
}

.fa-linked {
  color: #0077b5;
}

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<section>
  <div class="fact-area">
    <div class="container">
      <div class="fact-box">
        <div class="row">
          <div class="col-lg col-6 single-fact fa-2x">
            <i class="fa fa-facebook-square"></i>
            <h2 class="count">1500</h2>
            <p>Friends</p>
          </div>
          <div class="col-lg col-6 single-fact fa-2x">
            <i class="fa fa-instagram"></i>
            <h2 class="count">7000</h2>
            <p>Followers</p>
          </div>
          <div class="col-lg col-6 single-fact fa-2x">
            <i class="fa fa-twitter"></i>
            <h2 class="count">300</h2>
            <p>Followers</p>
          </div>
          <div class="col-lg col-6 single-fact fa-2x">
            <i class="fa fa-youtube"></i>
            <h2 class="count">100000</h2>
            <p>Subscribers</p>
          </div>
          <div class="col-lg col-6 single-fact fa-2x">
            <i class="fa fa-linkedin"></i>
            <h2 class="count">500</h2>
            <p>Connections</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/jquery.waypoints.min.js" integrity="sha512-f/gxy4xAjuGEIf/ujexcNI906CTS+kfw40QCyG/rEMKELvCIFaTOY+dfdn7M/eNsiMreG3SStjgFr9q8Me9Baw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js" integrity="sha512-d8F1J2kyiRowBB/8/pAWsqUl0wSEOkG5KATkVV4slfblq9VRQ6MyDZVxWl2tWd+mPhuCbpTB4M7uU/x9FlgQ9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
        -->

我有点卡在这里，因为我无法纠正我的错误。我确实认为我的代码很好，也许错误在于我正在使用我的输出的 cdn 链接：- https://ibb.co/sFbKTjB

标签： javascripthtmljquerycss

javascript - jQuery 计数器不上去

问题描述

解决方案

推荐阅读