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

尝试下面的代码段。您也可以使用<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 2

这应该有效：

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

Answer 3

您需要使用.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。

jquery倒计时单独分钟和秒

3 个答案: