JS 一次数一个

Question

到目前为止我已经创建了
1.当一行在视图中时，元素滑入
2. 数到一个数的计数器。

我想改进第 2 项，使计数器仅在可见时才开始，而且它们不会立即全部关闭，而是先在左侧开始，然后在完成下一个计数器时关闭，依此类推上。

有人可以帮我吗？

这是我用相同代码创建的 jsfiddle： https://jsfiddle.net/DTcHh/32842/

        //window and animation items
        var animation_elements = $.find('.animation-element');
        var web_window = $(window);

        //check to see if any animation containers are currently in view
        function check_if_in_view() {
        //get current window information
        var window_height = web_window.height();
        var window_top_position = web_window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);

        //iterate through elements to see if its in view
        $.each(animation_elements, function() {

          //get the element information
          var element = $(this);
          var element_height = $(element).outerHeight();
          var element_top_position = $(element).offset().top;
          var element_bottom_position = (element_top_position + element_height);

          //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
          if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
            element.addClass('in-view');
          } else {
            element.removeClass('in-view');
          }
        });

        }

        //on or scroll, detect elements in view
        $(window).on('scroll resize', function() {
          check_if_in_view()
        })
        //trigger our scroll event on initial load
        $(window).trigger('scroll');



        //Counter
        $('.counter').each(function() {
          var $this = $(this),
              countTo = $this.attr('data-count');

          $({ countNum: $this.text()}).animate({
            countNum: countTo
          },

          {
            duration: 8000,
            easing:'linear',
            step: function() {
              $this.text(Math.floor(this.countNum));
            },
            complete: function() {
              $this.text(this.countNum);
              //alert('finished');
            }
          });  
        });
    });

Answer 1

您可以通过从这里下载用户计数器 js link

https://www.npmjs.com/package/jquery.counterup

你只需要包含下面的js

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

和计数器跨度

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

然后反击 js

$('.counter').counterUp();

希望对您有所帮助

JS 一次数一个

JS Count numbers one at the time

javascript

jquery

counter