自定义 jquery 倒计时布局

Question

我坚持 jquery countdown 布局，我想显示这样的内容：

1 天，hours:minuts:sec

我可以像这样使用 layout: 选项来实现它

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

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

0 天，hours: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 倒计时布局

customize jquery countdown layout

jquery

countdown

countdowntimer