Bootstrap 4计数器-最大持续时间?

时间:2018-12-06 06:49:11

标签: javascript jquery bootstrap-4 counter duration

如何设置最大持续时间?最好分别设置每个仪表的速度。不需要。有人可以帮助我解决我的问题吗? 我的代码:

<section id="counter" class="counter py-3">
<div class="stat w-100 row">
<div class="milestone-counter">
  <span class="fa fa-user"></span>
  <span class="stat-count">12500</span>
  <div class="milestone-details">zadowolonych klientów</div>
</div>
<div class="milestone-counter">
  <span class="fas fa-bed"></span>
  <span class="stat-count">6000</span>
  <div class="milestone-details">przewiezionych łóżek</div>
</div>
<div class="milestone-counter"> 
  <span class="far fa-clock"></span>
  <span class="stat-count" data-delay="1">3000</span>
  <div class="milestone-details">przeprowadzek rocznie</div>
</div>
<div class="milestone-counter">
  <span class="fa fa-car"></span>
  <span class="stat-count">7</span>
  <div class="milestone-details">samochodów na mieście</div>
</div>
</div>
</section>

我的js(其工作系统是wordpress。):

(function($) {
function isScrolledIntoView($elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
function count($this) {
    var current = parseInt($this.html(), 10);
    if (isScrolledIntoView($this) && !$this.data("isCounting") && current < $this.data('count')) {
        $this.html(++current);
        $this.data("isCounting", true);
        setTimeout(function () {
            $this.data("isCounting", false);
            count($this);
        }, 5);
    }
}
$(".stat-count").each(function () {
    $(this).data('count', parseInt($(this).html(), 10));
    $(this).html('0');
    $(this).data("isCounting", false);
});
function startCount() {
    $(".stat-count").each(function () {
        count($(this));
    });
};
$(window).scroll(function () {
    startCount();
});
startCount();
})(jQuery);

更改数字5不会影响倒数速度。

0 个答案:

没有答案