Question

我坚持使用jquery countdown布局，我希望显示如下内容：

1天，小时：minuts：sec

我可以使用像{/ p>这样的layout:选项来解决它

layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}'

但现在我遇到了一个问题，当倒计时少于24小时时，它仍然会显示这样的日子

0天，小时：minuts：sec

我需要在倒计时少于24小时时不显示日期

我知道可以通过条件完成，但我不知道如何检查它不到24小时。

感谢您的帮助

Answer 1

您需要做的是在初始化倒计时时将onTick: changeLayout添加到您的选项中。然后将此changeLayout()函数添加到JS中。像这样：

var changed = false;
$(selector).countdown({layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}', onTick: changeLayout, until: +10}

function changeLayout(periods)
{
    if(!changed && $.countdown.periodsToSeconds(periods) <= 86400) //24hr = 24*60*60s
    {
        $(selector).countdown('option', {layout: '{hnn}{sep}{mnn}{sep}{snn}'});
        changed = true;
    }
}

Answer 2

假设您在页面中有多个倒计时，每个倒计时都有数据属性data-countdown-until，因此您可以使用以下内容自定义倒计时：

$('div[data-countdown-until]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-until'))
      $element.countdown(until: date, description: '', onTick: highlightLast5, layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}')

在这种情况下，它会显示N days hh:mm:ss 上面的代码适用于页面中任何数量的计时器。

自定义jquery倒计时布局

2 个答案: