Question

我正在尝试在页面上的元素内增加一个数字。但我需要数字包含一个逗号，而增量只会增加每秒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;
}

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您正在尝试为对象设置动画......这很奇怪。基本上，使用animate方法（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);

增加动画量的数量

2 个答案: