出现简单的jquery计数器答案

【问题标题】：Simple jquery counter on appear出现简单的jquery计数器
【发布时间】：2014-08-03 13:59:53
【问题描述】：

有太多不同的计数器脚本，我不知道从哪里开始，什么是矫枉过正，什么不是。

我正在寻找一个简单的计数器脚本，它会在目标元素首次出现在屏幕上时触发（例如，直到滚动到视图中才会触发）

我的想法是让元素在滚动到视图时进行动画/计数，我所要做的就是给它一个 counter 类。

例如，html 将是：

<span class="counter">99</span><span class="counter">55</span>

首先，这些元素将被设置为visibility:hidden，直到滚动到视图中。然后，它们将从 0 增加到文本节点的值（在本例中为 99 和 55），并在达到该值时停止。某种缓和效果可能是可取的，但不是必须的（例如，在达到该值时快速启动和减速）

提前致谢。只是在寻找最简单的解决方案。

【问题讨论】：

页面滚动插件很多，你试过什么？
嗯，你需要展示一下尝试，否则这看起来像write some code for me 问题

标签： jquery counter

【解决方案1】：

这是一个完整的代码：

function isElementVisible($elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $elementToBeChecked.offset().top;
    var BotElement = TopElement + $elementToBeChecked.height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}

$(window).scroll(function () {
    $( ".counter" ).each(function() {
    isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('Starting')){
           $(this).addClass('Starting');
           startTimer($(this));
        }
    });
});

function startTimer($this) {
    setTimeout(function(){
        $this.html($this.html() - 1);
        startTimer($this);
    }, 1000); 
}

isElementVisible函数帮助判断每次滚动后屏幕上是否出现一个控件。

然后您在每次滚动时调用此函数，如果显示屏上出现.counter 元素，则使用startTimer 函数仅为此元素启动计时器。

!$(this).hasClass('Starting') 被添加到代码中以防止不必要的呼叫功能，当计时器启动并一次又一次地滚动它时。当定时器第一次启动时，Starting 类被添加到元素中，并在下次跳过。

>>> JSFiddle Sample

您可以看到，每个计时器仅在看到时才启动，而其他计数器在看到时才启动。

【讨论】：

Moshaf，这让我开始了。但是，它倒数。如何修改它以从零开始计数，直到目标数，然后停止？
在startTimer 函数中，您可以检查 $this.html() 值并轻松执行您想要的操作。您可以将默认值设置为零和 +1 而不是 -1 并检查 $this.html() 如果达到特定数字，则停止计数。

【解决方案2】：

您的部分问题似乎已经有了答案：Start executing jQuery function when I scroll to a specific <div>

该问题的答案有一个 jsfiddle 可以帮助您入门。就是在start_count里写一个简单的计数器脚本

【讨论】：