Question

我正在尝试制作一个简单的Javascript动画，该动画会增加一个数字，直到达到目标数字。我现在正在这样做的方式不起作用。

HTML

<div id="number">5</div>

JS

$(document).ready(function() {
    var target = 50;
    var number = $('#number').text();

    while(number <= target) {
        setTimeout(function() {
            $('#number').text(++number);
        }, 30);
    }
});

Answer 1

这与您想要的类似：

   var interval = setInterval(function() {
        $('#number').text(number);
        if (number >= target) clearInterval(interval);
        number++;
    }, 30);

你的while循环将导致脚本执行“冻结”＃39;虽然它做了它的工作。它没有民意调查。另一个问题是你可能会召唤setTimeout 50次。您只需拨打setInterval一次，并在达到目标号码后清除它。

Answer 2

这是一个基于user1508519代码的解决方案，在ajax搜索/过滤后，自动增加/减少并在我的页面上实时更新：

    ActiveSheet.ListObjects.Add(xlSrcRange, Range("$B$12:$G$18"), , xlYes).Name = tablename

在ajax成功中调用我的函数：

function animateResultCount(number, target, elem) {
    if(number < target) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (number >= target) {
                clearInterval(interval);
                return;
            }
            number++;
        }, 30);
    }
    if(target < number) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (target >= number) {
                clearInterval(interval);
                return;
            }
            number--;
        }, 30);
    }
}

动画号码递增

2 个答案: