javascript - jQuery 倒计时如果没有剩余时间则隐藏小时

Question

我正在使用在 youtube 教程上找到的 jquery 倒计时脚本，但我想更改一些因素:

如果没有剩余时间(即达到 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);
            }

希望有帮助:)