javascript - Jquery 计数动画？

我有一个计数器需要在 x 秒(很可能是 3 秒)内从 0 美元增加到 10,000 美元。

只是纯文本，有点像毫秒倒计时，但向上并带有美元符号。

我宁愿不使用笨重的插件，因为它只需要在 x 秒内循环 1-10,00 并每 100 毫秒左右更新一次。

我一直在创建将更新的循环，我应该从哪里开始？

到目前为止，这是我对点击事件的了解:

  function countUp() {
    console.log('counted');
    }

    setInterval("countUp()", 1000)

最佳答案

我会使用 http://www.mredkj.com/javascript/numberFormat.html 中的代码来添加逗号:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

然后我会使用 setInterval 数到 1000，就像这样:

var x = 1;
    var interval = setInterval(
    function(){
        if (x < 10000){
            x = parseInt(x) + 100;
            if(x > 10000){x = 10000}
            $('#number').html("$" + addCommas(x));
            }},
            10);

诀窍是让它在 3 秒内发生，因为 javascript 的执行速度因浏览器而异。 10 毫秒的延迟和 100 的跳跃计数在 FireFox 和 Google Chrome 中对我有用。

上面的代码将保持每 10 毫秒运行一次，但一旦超过 10,000 美元，实际上不会改变任何东西。因此，只要您将 x 设置为小于 10,000，它就会再次开始计数。但是，您可以使用 clearInterval(interval) 停止执行代码

关于javascript - Jquery 计数动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2823005/