Need help animation for time format (hh:mm:ss)

[aishek]

Need help animation for time format (hh:mm:ss)

[aishek]

Hi! It's not so complicated:

1. Convert time to seconds
2. Animate seconds from start to end
3. Output seconds in preferred format

<p>Time is <span id="target">0</span>.</p>

<script>
  var from = 0; // 00:00:00
  var to = 0 * 60 * 60 + 9 * 60 + 50; // 00:09:50

  $('#target')
    .prop('number', from)
    .animateNumber(
      {
        number: to,
        numberStep: function(now, tween) {
          var floored_number = Math.floor(now),
              target = $(tween.elem);

          var hours = Math.floor(floored_number / (60 * 60));
          hours = (hours < 10 ? '0' + hours : hours);

          var minutes = Math.floor((floored_number - hours * 60 * 60) / 60);
          minutes = (minutes < 10 ? '0' + minutes : minutes);

          var seconds = floored_number - hours * 60 * 60 - minutes * 60;
          seconds = (seconds < 10 ? '0' + seconds : seconds);

          var time = hours + ':' + minutes + ':' + seconds;

          target.text(time);
        }
      },
      5000
    );
</script>

But I think you just need to display time, not animate number :-)