Javascript Jquery计算动画？

我有一个计数器，需要在x秒内（很可能是3秒）从0美元数到10000美元

只是简单的文本，有点像一个毫秒倒计时计时器，但向上并带有一个美元符号

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

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

---

以下是迄今为止我对点击事件的了解：

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

    setInterval("countUp()", 1000)

---

创建一个函数，然后使用setInterval（）更新该函数

函数应该是相当动态的，并且应该读取现有的值，记住使用parseInt（）来确保计算的是数字，而不仅仅是串接字符串

45+45==4545

parseInt（45）+parseInt（45）

使用闭包等。如果需要更多帮助，请告诉我。

使用jQuery（编辑的）：

---

只是为了好玩而测试了一下，您可以根据需要随意修改：

var x = 0;
var total = 10000;
var seconds = 3;
var interval = 100;
var increment = Math.ceil(total / ((seconds * 1000) / 100));

var myInterval = setInterval(function(){
    if((x + increment) < total){
        x += increment;
    } else {
        x = total;
        clearInterval(myInterval);
    }
    console.log(x);

}, interval);

var x=0；
var总计=10000；
var秒=3；
var区间=100；
var增量=数学单元（总计/（（秒*1000）/100））；
var myInterval=setInterval（函数（）{
如果（（x+增量）<总计）{
x+=增量；
}否则{
x=总数；
clearInterval（myInterval）；
}
控制台日志（x）；
}，间隔）；

我将使用中的代码添加逗号：

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);

var x=1；
var interval=setInterval（
函数（）{
如果（x<10000）{
x=parseInt（x）+100；
如果（x>10000）{x=10000}
$（'#number'）.html（“$”+addCommas（x））；
}},
10);

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

---

上面的代码将保持每10毫秒运行一次，但一旦超过10000美元，实际上不会改变任何内容。因此，当您将x设置为小于10000时，它将再次开始计数。但是，您可以使用

clearInterval（interval）

bah停止执行代码。这个网站太快了。非常感谢：）我会在那里放一个clearInterval，否则即使达到10000，脚本也会继续运行。你知道当我再次启动函数时，如何重新加载页面吗？@Mike，谢谢。。。没有和setInterval一起工作过很多。。。如果有的话（感谢jQuery）。我编辑了答案。您可以设置一个接受所需变量的函数：

countUp（当前、完成、持续时间、速率）

，然后调用它。我不知道每次你叫它的时候，清除间隔会起作用。这看起来很好也很简单。有没有办法在不刷新页面的情况下将其重置为反复运行？@Wes刚刚将x设置回0。这将重置它，因为我从未调用ClearInterval大多数浏览器实际上不会以1毫秒的速度执行。Firefox将每隔10毫秒（或更长）施加延迟。如果你在寻找性能，你应该试着比较1ms和10ms，看看哪个更快。还有，-清除你的间隔-。@Mike非常正确。我将时间间隔设置为10毫秒，没有注意到Chrome和Firefox之间有太大的差异。我已经编辑了我的答案，并提到了清除间隔。

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