Question

我有一个计数器需要在x秒内从0美元到10,000美元（最可能是3秒）。

只是直接的文字，有点像毫秒倒数计时器，但是向上并带有美元符号。

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

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

以下是我到目前为止点击事件的内容：

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

    setInterval("countUp()", 1000)

Answer 1

使用jQuery（已编辑）：

$(function(){
    var current = 0;
    var finish = 10000;
    var miliseconds = 3000;
    var rate = 20;

    var counter = setInterval(function(){
         if(current >= finish) clearInterval(counter);
         $("#div").text("$" + current);
         current = parseInt(current) + parseInt(rate);
    }, miliseconds / (finish / rate));
});

Answer 2

我会使用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的执行速度因浏览器而异。在FireFox和谷歌浏览器中，10毫秒的延迟和100个跳跃计数为我工作。

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

停止执行代码

Answer 3

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

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

45 + 45 == 4545

parseInt（45）+ parseInt（45）

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

Answer 4

只是为了好玩而对此进行了测试，随时可以修改：

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

Jquery算上动画？

4 个答案: