NaN倒数计时器javascript

Question

我为 wordpress 自定义插件创建了一个 javascript 倒计时。 我读过这篇文章，这是我第一次尝试做类似的事情。 在我写完代码后，我正在测试它，最初它运行良好。 现在，如果我尝试在控制台中记录小时、分钟、天和秒的值，我会收到一条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(td); $('.hours').html(th); $('.minutes').html(tm); $('.seconds').html(ts); }, 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，所以我删除了 PHP 条件并硬编码了一个日期值来代替get_option调用。