jQuery的倒計時隱藏小時沒有離開小時

Question

我使用一個jQuery倒計時腳本，我在YouTube上找到的教程，但我想改變一些因素：

我想隱藏日，分鐘等，如果有都不剩（即達到0）。

此時會顯示類似..

00天00小時13分58秒

我想要顯示它像..

13分58秒

---

這就是我正在使用的：

個countdown.js

(function($){ 

    $.fn.countdown = function(options, callback){ 

     var settings = { 'date': null }; 
     if(options){ 
      $.extend(settings, options); 
     }; 

     this_sel = $(this); 

     function count_exec() { 

      eventDate = Date.parse(settings['date'])/1000; 
      currentDate = Math.floor($.now()/1000); 

      if(eventDate <= currentDate){ 

       callback.call(this); 
       clearInterval(interval); 

      } 

      seconds = eventDate - currentDate; 

      days = Math.floor(seconds/(60 * 60 * 24)); 
      seconds -= days * 60 * 60 * 24; 

      hours = Math.floor(seconds/(60 * 60)); 
      seconds -= hours * 60 * 60; 

      minutes = Math.floor(seconds/60); 
      seconds -= minutes * 60; 

      days = (String(days).length !== 2) ? '0' + days : days; 
      hours = (String(hours).length !== 2) ? '0' + hours : hours; 
      minutes = (String(minutes).length !== 2) ? '0' + minutes : minutes; 
      seconds = (String(seconds).length !== 2) ? '0' + seconds : seconds; 

      if(!isNaN(eventDate)){ 
       this_sel.find('.days').text(days); 
       this_sel.find('.hours').text(hours); 
       this_sel.find('.minutes').text(minutes); 
       this_sel.find('.seconds').text(seconds); 
      } 

     } 

     count_exec(); 
     interval = setInterval(count_exec, 1000); 

    } 

})(jQuery); 

HTML

<span class="days">00</span> Days 
<span class="hours">00</span> Hours 
<span class="minutes">00</span> Minutes 
<span class="seconds">00</span> Seconds 

運行

<script> 
$(document).ready(function(){ 

    $('#item-1').countdown({ date: '30 July 2015 12:00:00' }, function() { 

     $('#item-1').text('Finished'); 

     $.ajax({ 
      url: "/ajax", 
      type: "GET", 
      data: { 'id' : 1 } 
     }); 

     window.setTimeout(function(){location.reload()},3000); 
    }); 

}); 
</script> 

謝謝！

Answer 1

在這種情況下，你可以用像

<span class="days_show"><span class="days">00</span> Days</span> 
<span class="hours_show"><span class="hours">00</span> Hours</span> 
<span class="minutes_show"><span class="minutes">00</span> Minutes</span> 
<span class="seconds_show"><span class="seconds">00</span> Seconds</span> 

if(!isNaN(eventDate)){ 
       if(days==0){ 
       this_sel.find('.days_show').hide(); 
       } 
       if(hours==0){ 
       this_sel.find('.hours_show').hide(); 
       } 
       if(minutes==0){ 
       this_sel.find('.minutes_show').hide(); 
       } 
       if(seconds==0){ 
       this_sel.find('.seconds_show').hide(); 
       } 
       this_sel.find('.days').text(days); 
       this_sel.find('.hours').text(hours); 
       this_sel.find('.minutes').text(minutes); 
       this_sel.find('.seconds').text(seconds); 
      } 

希望它能幫助:)

Answer 2

是你的文字！在全網搜索後找到解決這個問題的辦法。我想出了我自己的簡單解決方案。對不起，它不是基於原始問題的代碼。但是，它可以幫助別人卡在想解決這個問題，同樣的情況。這就是我所做的。

差不多，如果計時器超過..更改文本，我們是活的！否則......如果連剩下的天大於0 ...顯示正常代碼..否則，如果剩下的天是== 0，從公式除去天。希望它能幫助別人！時光倒流:)

var tenSeconds = new Date().getTime() + 10000; 
var realdate = "2016/04/26"; 

    $('#Trm_Countdown').countdown(tenSeconds, {elapse: true,}).on('update.countdown', function(event) { 
     var $this = $(this); 
     if (event.elapsed) 
     { 
      $this.html(event.strftime("<span class='mobile-end'>We're Live!</span>")); 
     } 
     else 
     { 
      if (event.offset.totalDays > 0) 
      { 
       $this.html(event.strftime('' 
       + '<span>Live-event broadcast begins in </span>' 
       + '<span class="trm-timer">%-D</span> Day%!D ' 
       + '<span class="trm-timer">%H:</span>' 
       + '<span class="trm-timer">%M:</span>' 
       + '<span class="trm-timer">%S</span> ')); 
      } 

      else 
      { 
       $this.html(event.strftime('' 
       + '<span>Live-event broadcast begins in </span>' 
       + '<span class="trm-timer">%H:</span>' 
       + '<span class="trm-timer">%M:</span>' 
       + '<span class="trm-timer">%S</span> ')); 
      } 

     } 
    });