使用动画增加数量的数量

我试图在页面中的元素内增加一个数字。但我需要包含逗号的数字，而增量只会每秒增加1位数。使用动画增加数量的数量

我的代码工作，但我有点坚持不知道在哪里设置增量仅增加每秒1位（如：10,100,040然后10,100,041等）

<script></script> 
<div id="el"></div>

// Animate the element's value from x to y: 
$({ 
    someValue: 40 
}).animate({ 
    someValue: 45000000 
}, { 
    duration: 3000, 
    easing: 'swing', // can be anything 
    step: function() { // called on every step 
     // Update the element's text with rounded-up value: 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    }, 
    complete: function(){ 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    } 
}); 

function commaSeparateNumber(val){ 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
     val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
    } 
    return "$" + val; 
}

来源

2016-09-26 Morgan Ng

的间隔会更适合实现这个，而不是jQuery的animate()方法，它旨在修改DOM。试试这个：

var start = 40, end = 45000000; 
 
var interval = setInterval(function() { 
 
    var $el = $('#el'); 
 
    var val = $el.data('value') || 40; 
 
    $el.text(commaSeparateNumber(++val)).data('value', val) 
 
    
 
    if (val >= end) 
 
     clearInterval(interval); 
 
}, 1000); 
 

 
function commaSeparateNumber(val) { 
 
    while (/(\d+)(\d{3})/.test(val.toString())) { 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return "$" + val; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="el">$40</div>

来源

2016-09-26 07:45:18

罗里嗨，你的代码可以正常使用，可我知道如何设置增加每秒的时间？ –

更改'setInterval'中的'1000'参数。这是以毫秒为单位的迭代之间的延迟。你确定要延长它吗？该柜台将在1秒内延期1.5年 –

您试图动画的对象......这很奇怪。基本上，使用动画方法（according to Spec）为DOM元素的某些CSS样式设置动画效果。

那怎么它通常用于：

$('#el').animate({ top: '10px'}, 100, function() { /* on complete function */ });

你的任务可以通过使这样的事情来解决：

var value = 40; 
var end = 45000000; 

var interval = setInterval(function() { 
    value++; 
    $('#el').text(commaSeparateNumber(value)); 

    if (value >= end) { 
     clearInterval(interval); 
    } 
}, 1000);

来源

2016-09-26 07:51:44

使用动画增加数量的数量

回答

相关问题