Как сделать анимированный номер, добавляя значение каждую секунду
Как мне сделать анимированный номер, добавляя значение каждую секунду. Как в этом плагине http://aishek.github.io/jquery-animateNumber
HTML
<div class = "earned">171655.10457862</div>
Вот код jQuery
var DOGEbal = 171655.10457862;
var per_second = 1.56948984;
interval = setInterval(function(){
DOGEbal += per_second;
DOGEbalStack = DOGEbal.toString();
DOGEbalStack = DOGEbalStack.slice(0, (DOGEbalStack.indexOf("."))+9);
$(".earned").html(DOGEbalStack);
}, 1000);
Поэтому я хотел бы оживить число, добавляя per_second к .earned. Делать это каждую секунду, как в плагине animateNumber.
Вот пример https://jsfiddle.net/uzd83qw6/1/. Как оживить этот пример?
@Jeto Этот пример в скрипке не анимирован. Пожалуйста, посмотрите на пример расширения. Это анимация. В скрипке просто увеличивается каждую секунду...
Анимации здесь нет. Что вы хотите, так это написать каждое число между текущим и следующим числом. Вам просто нужен цикл, который переходит от текущего к следующему, и распечатайте его.
Просто замените 1000 на 10, а 1.5xxx на 0.015xxx, и он будет анимирован.
Тот факт, что число изменяется через все промежуточные числа, создает впечатление движения, следовательно, анимации. Он просто печатает много чисел, прежде чем напечатать окончательный номер.
@NawedKhan Это то, что я ищу. Как реализовать это в текущем примере. Более простой и плавный способ. Я нашел расширения от 0 до некоторого значения. Но не для добавления
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете сделать свой «шаг в секунду» и преобразовать его в задержку «в миллисекунду»:
function animate($target, fromValue, incrementPerSecond) {
var incrementPerMillisecond = incrementPerSecond / 1000;
var currentValue = fromValue;
$target.text(currentValue);
setInterval(function () {
$target.text((currentValue + incrementPerMillisecond).toFixed(8));
currentValue += incrementPerMillisecond;
}, 1);
}
animate($('.earned'), 171655.10457862, 1.56948984);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "earned"></div>incrementPerSecond / 10 и setInterval to 100 вроде лучше. Спасибо
Не уверен, что ваш вопрос здесь. В этом примере скрипки есть «анимированное» число, которое увеличивается каждую секунду.