为了账号安全,请及时绑定邮箱和手机立即绑定

NaN 倒数计时器 javascript

NaN 倒数计时器 javascript

PHP
慕的地6264312 2022-07-22 09:43:05
我为 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                              };                            }
查看完整描述

1 回答

?
慕码人2483693

TA贡献1860条经验 获得超9个赞

问题是您将两个参数传递给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,所以我删除了 PHP 条件并硬编码了一个日期值来代替get_option调用。


查看完整回答
反对 回复 2022-07-22
  • 1 回答
  • 0 关注
  • 76 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号