在jQuery中创建一个计数器

我正在尝试创建一个计数器jQuery函数,该函数将功能从零动画到指定数字。基本上我从网上得到了ff代码:

谁能用外行的术语向我逐行解释jQuery代码?我试图理解整个代码。

var initial = 0;

$(window).scroll(function() {
  var msTop = $('#counter').offset().top - window.innerHeight;
  if (initial == 0 && $(window).scrollTop() > msTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countData = $this.attr('counter');
      $({
        countNo: $this.text()
      }).animate({
        countNo: countData
      }, {
        easing: 'linear',
        duration: 2300,
        step: function() {
          $this.text(Math.floor(this.countNo));
        },
        complete: function() {
          $this.text(this.countNo);
        }
      });
    });
    initial = 1;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="mb-2 mt-3"><span class="counter-value mt-4" counter="90">0</span>+</h1>
<h1 class="mb-2 mt-3"><span class="counter-value mt-4" counter="82">0</span>+</h1>
<h1 class="mb-2 mt-3"><span class="counter-value mt-4" counter="15">0</span></h1>
评论