jQuery的倒計時單獨小時分秒

Question

我使用這個jQuery倒計時庫

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

代碼是工作的罰款。這裏是我的代碼

<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')); 
}); 

這上面的代碼顯示時間

我想要做的是我想在分開的div中顯示小時分鐘和秒鐘

試圖做這樣的事情

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

但上面的代碼中不單獨顯示時間。最後還有一件事我不想在數字前添加hr或min。我只需要數字。我的HTML是這樣的

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

Answer 1

您需要使用.strftime()方法來獲取輸出正確的字符串。

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')); 
}); 

這裏有一個fiddle。

Answer 2

請嘗試下面的代碼片段。您可以使用的<span>代替<div>以及

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

這應該工作：

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

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

小提琴這裏：http://jsfiddle.net/zs9bu205/