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.

Answer 2

Try the snippet below. You may use <span> instead of <div> as well

<!-- HTML -->
<div id="clock"></div>

// JavaScript
$('#clock').countdown('2020/10/10', function(event) {
   var $this = $(this).html(event.strftime(''
     + '<div id="hours">%H</div>'
     + '<div id="minutes">%M</div>'
     + '<div id="seconds">%S</div>'));
});

Working jsBin

Answer 3

This should work:

$('#clock').countdown("2120/11/19", function(event) {
  $("span.hours").html(event.strftime("%-H"));
  $("span.minutes").html(event.strftime("%-M"));
  $("span.seconds").html(event.strftime("%-S"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.0.4/jquery.countdown.min.js"></script>
<div id="clock">
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>