Анимировать увеличивающееся число и показать десятичное значение

Question

У меня есть простой счетчик в jQuery, который начинается с нуля и увеличивается на 5.5, но он показывает только значение 5 без десятичной точки.

Я пробовал настраивать регулярное выражение, но это не сработало.

Мне также нужно добавить какую-то анимацию в число, вместо того, чтобы прыгать от 0 до 5 до 10 ... Я бы хотел, чтобы она облегчала и подсчитывала по мере ее увеличения.

HTML-

<div class="label label-success count">0</div> 

The Javascript

function randomIntFromInterval(min,max) { 
    return Math.floor(5.5); 
} 

$(document).ready(function() { 
    setInterval(function() { 
     $('.count').html(function(i, val) { 
      val = val.replace(/,/g,''); 
      return (parseFloat(val,10)+randomIntFromInterval(2,30000)).toString().replace(/\B(?=(^-?(?!.{12})\d+(?:\.\d+)?$))/g, ","); 
     }) 
    }, 1000); 

}); 

JSFiddle: https://jsfiddle.net/62vcz9qs/

Answer 1

Причина вы только получаете 5, а не 5,5, потому что вы конкретно вызова Math.floor(5.5) который возвращает 5 не 5.5 если убрать Math.floor счетчик будет расти на 5.5.

Вот документы для Math.floor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

Answer 2

Я сделал некоторые довольно основные изменения и удалить функцию randomIntFromInterval(), как это кажется довольно ненужным. Я просто сделал интервал времени (1000/5.5) и сделал приращение всего на 1 секунду.

Это позволяет добиться желаемой анимации, которая вам нужна, и увеличивается на 5.5 каждую секунду.

$(document).ready(function() { 
setInterval(function() { 
    $('.count').html(function(i, val) { 
     val = val.replace(/,/g,''); 
     return (parseFloat(val,10)+1).toString().replace(/\B(?=(^-?(?!.{12})\d+(?:\.\d+)?$))/g, ","); 
    }) 
}, (1000/5.5)); 

});

Отъезд в JS Fiddle здесь: https://jsfiddle.net/62vcz9qs/2/

Answer 3

$(document).ready(function() { 
     setInterval(function() { 
      $('.count').html(function(i, val) { 
       val = val.replace(/,/g,''); 
       return val = parseFloat(val)+5.5 
      }) 
     }, 1000); 

    }); 

JSFiddle: http://jsfiddle.net/dhruv1992/62vcz9qs/8/