Таймер обратного отсчета javascript

Question

Я создал javascript обратный отсчет для пользовательского плагина WordPress. Я прочитал эту статью , и я впервые пытаюсь сделать что-то подобное. После того, как я закончил писать код, я тестировал его, и изначально он работал нормально. Теперь, если я пытаюсь записать значения часов, минут, дней и секунд в консоли, я получаю сообщение NaN. Я не знаю, что случилось, кто-нибудь может мне помочь?

<?php if( get_option('show-countdown') ): ?>
                    <div class="countdown">
                        <h1 class="days d-inline"></h1>
                        <h1 class="hours d-inline"></h1>
                        <h1 class="minutes d-inline"></h1>
                        <h1 class="seconds d-inline"></h1>
                    </div>

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

                            var date = '<?php echo get_option('countdown-timer'); ?>';
                            console.log(date);
                            function remainingTime( date ){
                                var countdown = Date.parse(date) - Date.parse(new Date());
                                var seconds = Math.floor( (countdown/1000) % 60 );
                                var minutes = Math.floor( (countdown/1000/60) % 60 );
                                var hours = Math.floor( (countdown/(1000*60*60)) % 24 );
                                var days = Math.floor( countdown/(1000*60*60*24) );
                                return {
                                'total': countdown,
                                'd': days,
                                'h': hours,
                                'm': minutes,
                                's': seconds
                              };
                            }

                            console.log(remainingTime(date));

                            function initClock( endtime ){
                                var timeinterval = setInterval(function(){
                                    var t = remainingTime( endtime );

                                    $('.days').html(t.d);
                                    $('.hours').html(t.h);
                                    $('.minutes').html(t.m);
                                    $('.seconds').html(t.s);
                                }, 1000);
                            }
                            initClock( '.countdown', date );

                        });
                    }(jQuery));
                    </script>
                <?php endif; ?>
                </div>

Answer 1

Проблема заключалась в том, что вы передавали два аргумента initClock, но подпись метода принимала только один (endTime). Удалив первый аргумент, который оказался неиспользуемой CSS строкой селектора, проблема решается:

(function($) {
  $(document).ready(function() {

    var date = '2030-01-01';
    console.log(date);

    function remainingTime(date) {
      var countdown = Date.parse(date) - Date.parse(new Date());
      var seconds = Math.floor((countdown / 1000) % 60);
      var minutes = Math.floor((countdown / 1000 / 60) % 60);
      var hours = Math.floor((countdown / (1000 * 60 * 60)) % 24);
      var days = Math.floor(countdown / (1000 * 60 * 60 * 24));
      return {
        'total': countdown,
        'd': days,
        'h': hours,
        'm': minutes,
        's': seconds
      };
    }

    console.log(remainingTime(date));

    function initClock(endtime) {
      var timeinterval = setInterval(function() {
        var t = remainingTime(endtime);

        $('.days').html(t.d);
        $('.hours').html(t.h);
        $('.minutes').html(t.m);
        $('.seconds').html(t.s);
      }, 1000);
    }
    
    initClock(date);
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="countdown">
  <h1 class="days d-inline"></h1>
  <h1 class="hours d-inline"></h1>
  <h1 class="minutes d-inline"></h1>
  <h1 class="seconds d-inline"></h1>
</div>

Примечание: поскольку речь шла в основном о JavaScript, вместо вызова get_option я удалил условное значение даты PHP и жестко закодировал его. .