Как сделать анимированный номер, добавляя значение каждую секунду - PullRequest
Новая
       19

Как сделать анимированный номер, добавляя значение каждую секунду

0 голосов
/ 09 апреля 2019

Как сделать анимированный номер, добавляя значение каждую секунду. Как в этом плагине 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/. Как оживить этот пример?

1 Ответ

1 голос
/ 09 апреля 2019

Вы можете сделать свой «шаг в секунду» и преобразовать его в задержку «на миллисекунду»: 

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>
...