Funkcja odliczjaca do zadanej wartosci

0

Witajcie,

Napisałem funkcje odliczającą od 0 do wartości wygenerowanej przez php z bazy (tutaj dla uproszczenia 50)

 $('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 5000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="count_start"> 
   50
</div> 

Teraz pojawił mi sie kłopot bo chce zastosować również funkcje do odliczania czasu w formacie HH:mm gdzie godziny HH niekoniecznie są wartością dwucyfrową i tak na przykład może wyglądać tak: 85:59 lub tak 15842:56. Jedynym stałym elementem jest tutaj ":"

czy ktoś mi może pomoc w tym temacie jak rozdzielić to na dwa liczniki i tak np HH odliczały by się osobno mm osobno ...

0

Z powodu, że jQuerowe animate nie dociąga wartości do równego końca musiałem zaimplementować osobno callback complete.
W tym celu wydzieliłem sobie też target.

Dwóch prostych funkcji użyłem do konwersji - numer -> czas oraz czas -> numer.

0

Nie wiem czy w dobrym kierunku podążam ... moze ktos spojrzec na poniższy kod...

 function countingdecimal() {
$('.countdecimal_start').each(function () {
  var $this = $(this);
  var timesplited = $this.toString().split(":");
  jQuery({ Counter: 0 }).animate({ Counter: timesplited[0].text() }, {
    duration: 5000,
    easing: 'swing',
    step: function () {
    //$this.text(Math.ceil(this.Counter));
    timesplited[0].text(timesplited[0].Counter.toFixed(2));
    }
  });
  
    jQuery({ Counter: 0 }).animate({ Counter: timesplited[1].text() }, {
    duration: 5000,
    easing: 'swing',
    step: function () {
    //$this.text(Math.ceil(this.Counter));
    timesplited[1].text(timesplited[1].Counter.toFixed(2));
    }
  });
});
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1