Question

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

我想隐藏天，分钟等，如果没有剩余（即达到0）。

此时它会显示类似......

<00> 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> '));
            }  

        }
  });

如果没有时间，jQuery倒计时会隐藏小时数

2 个答案: