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

                              };

                            }

Answer 1

问题是您将两个参数传递给initClock，但方法签名只接受一个 ( endTime)。通过删除似乎是未使用的 CSS 选择器字符串的第一个参数，问题得到解决：(function($) {&nbsp; $(document).ready(function() {&nbsp; &nbsp; var date = '2030-01-01';&nbsp; &nbsp; console.log(date);&nbsp; &nbsp; function remainingTime(date) {&nbsp; &nbsp; &nbsp; var countdown = Date.parse(date) - Date.parse(new Date());&nbsp; &nbsp; &nbsp; var seconds = Math.floor((countdown / 1000) % 60);&nbsp; &nbsp; &nbsp; var minutes = Math.floor((countdown / 1000 / 60) % 60);&nbsp; &nbsp; &nbsp; var hours = Math.floor((countdown / (1000 * 60 * 60)) % 24);&nbsp; &nbsp; &nbsp; var days = Math.floor(countdown / (1000 * 60 * 60 * 24));&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; 'total': countdown,&nbsp; &nbsp; &nbsp; &nbsp; 'd': days,&nbsp; &nbsp; &nbsp; &nbsp; 'h': hours,&nbsp; &nbsp; &nbsp; &nbsp; 'm': minutes,&nbsp; &nbsp; &nbsp; &nbsp; 's': seconds&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; console.log(remainingTime(date));&nbsp; &nbsp; function initClock(endtime) {&nbsp; &nbsp; &nbsp; var timeinterval = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; var t = remainingTime(endtime);&nbsp; &nbsp; &nbsp; &nbsp; $('.days').html(t.d);&nbsp; &nbsp; &nbsp; &nbsp; $('.hours').html(t.h);&nbsp; &nbsp; &nbsp; &nbsp; $('.minutes').html(t.m);&nbsp; &nbsp; &nbsp; &nbsp; $('.seconds').html(t.s);&nbsp; &nbsp; &nbsp; }, 1000);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; initClock(date);&nbsp; });}(jQuery));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="countdown">&nbsp; <h1 class="days d-inline"></h1>&nbsp; <h1 class="hours d-inline"></h1>&nbsp; <h1 class="minutes d-inline"></h1>&nbsp; <h1 class="seconds d-inline"></h1></div>注意：因为这主要是关于 JavaScript，所以我删除了 PHP 条件并硬编码了一个日期值来代替get_option调用。