Jquery向上动画？

我有一个计数器需要在x秒（最可能是3秒）内从$ 0到$ 10,000计数。Jquery向上动画？

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

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

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

这是我到目前为止已经有上单击事件：

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

    setInterval("countUp()", 1000)

来源

2010-05-12 wesbos

我会用代码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; 
}

我愿意n使用的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)

来源

2010-05-12 22:22:57 Adam

。任何方式来重置它来反复运行而不刷新页面？ – wesbos 2010-05-12 23:33:11

@Wes只是将x设置回0.这将重置它，因为我从来没有调用clearInterval – Adam 2010-05-13 00:00:09

所以在函数结束时将x = 0; ？似乎没有工作.. – wesbos 2010-05-13 00:14:20

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

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

45 + 45 = = 4545

parseInt函数（45）+ parseInt函数（45）

使用封闭等让我知道如果你需要更多的帮助。

来源

2010-05-12 21:56:53

停止执行代码也许某些代码会有所帮助。我会添加我迄今为止所拥有的。 – wesbos 2010-05-12 22:05:07

使用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)); 
});

来源

2010-05-12 22:04:03 bschaeffer

b。这个网站太快了。非常感谢:) – wesbos 2010-05-12 22:07:31

我会在那里放置一个clearInterval，否则即使达到10000后脚本也会继续运行 – 2010-05-12 22:08:14

任何想法如何在重新加载页面时再次启动该功能时重新启动该功能？ – wesbos 2010-05-12 22:41:01

刚刚测试了这一点，为了好玩，觉得仍可以随意修改你需要：

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

来源

2010-05-12 22:04:57

Jquery向上动画？

回答

相关问题