使用動畫增加數量的數量

我試圖在頁面中的元素內增加一個數字。但我需要包含逗號的數字，而增量只會每秒增加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

使用動畫增加數量的數量

回答

相關問題