jquery countdown seperate hour minutes and seconds

Question

I am using this jquery countdown library

http://hilios.github.io/jQuery.countdown/documentation.html

code is working fine.. here is my code

<div id="clock"></div>


$('#clock').countdown("2020/10/10", function(event) {
  var totalHours = event.offset.totalDays * 24 + event.offset.hours;
   $(this).html(event.strftime(totalHours + ' hr %M min %S sec'));
 });

this above code displays time

what I want to do is I want to show hour minutes and seconds in separate divs

trying to do something like this

$(this).find('span.'+"hours").html(totalHours + 'hr ');
 $(this).find('span.'+"minutes").html(totalHours + '%M ');
   $(this).find('span.'+"seconds").html(totalHours + '%S ');

But above code doesn't show the time separately. and lastly one more thing I dont want to add hr or min in front of numbers. I need just numbers. My HTML is like this

<div class="clock">
 <span class="hours">48</span> //48 is an example

Answer 1

You need to use the .strftime() method to get the right string to output.

HTML:

<div id="clock">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>

JS:

$('#clock').countdown("2020/10/10", function(event) {
  var totalHours = event.offset.totalDays * 24 + event.offset.hours;
   $('.hours').html(totalHours);
   $('.minutes').html(event.strftime('%M'));
   $('.seconds').html(event.strftime('%S'));
 });

Here's a fiddle.