Question

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div style="height:900px;background:red;">Scroll Down to check animation</div>
        <div id="value" ></div>
<script type="text/javascript">    
 function animateValue(id, start, end, duration) {
        var range = end - start;
        var current = start;
        var increment = end > start? 10 : -1;
        var stepTime = Math.abs(Math.floor(duration / range));
        var obj = document.getElementById(id);
        var timer = setInterval(function() {
            current += increment;
            obj.innerHTML = current;
            if (current == end) {
                clearInterval(timer);
            }
        }, stepTime);
    } 
    animateValue("value", 1000, 5000, 500);
</script>

目前，该数字是页面加载的动画，但是当我们将页面滚动到特定的div 时，它应该开始动画。

注意：数字动画正在运行但是当我向下滚动页面到达该特定div时它应该开始动画。有什么帮助吗？

Answer 1

你需要将回调传递给setInterval.Just传递函数的名称，它将工作。并将毫秒传递给setInterval的第二个参数。这是10秒== 10000毫秒

   var number = 1035;
    setInterval(increment, 10000);

    function increment()
    {
        number+=10;
        document.getElementById("displayDiv").innerHTML = number;
    }

当我们向下滚动到该特定div时，开始编号动画（已编辑）

1 个答案: