0

我正在努力使用沿 laravel 5.6 安装的 Hilios 的 JQuery 倒数计时器

我有生成值的 div，如下所示：

<div data-countdown="{{ $data->expiration }}"></div>

生成时的结果如下所示：

<div data-countdown="2018-06-15 17:25:30"></div>

所以在视图文件的底部，我用倒计时脚本实现了 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>

<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js" type="application/javascript"></script>

<script type="application/javascript">
    $('[data-countdown]').each(function() {
       var $this = $(this);
       var finalDate = $(this).data('countdown');
       $this.countdown(finalDate, function(event) {
          $this.html(event.strftime('%D days %H:%M:%S'));
       });
     });
</script>

问题是它根本不起作用，更糟糕的是 - 我在控制台中没有收到任何错误......

提前感谢您的任何建议，这可能有助于解决这个问题。

4

2 回答 2

0

如果您的代码单独正确运行（例如在 jsfiddle 上），尝试错误或某些控制台日志可能是您的朋友。

尝试以下代码，验证控制台输出是否正确以及您的预期。如果数据属性内容正确，我可能会怀疑 event.strftime 函数存在一些问题：

  <script type="application/javascript">
    $('[data-countdown]').each(function() {
      var $this = $(this);
      var finalDate = $(this).data('countdown');

      console.log('finalDate:', finalDate);

      $this.countdown(finalDate, function(event) {
        console.log('strftime output:', event.strftime('%D days %H:%M:%S'));

        $this.html(event.strftime('%D days %H:%M:%S'));
      });
    });
  </script>
于 2018-06-10T11:10:13.097 回答
0

解决了这个问题。

这比任何人都可以想到的要容易，而且显而易见......

所以首先我把 JS 代码放在 下@endsection，所以它没有加载到视图中。把上面的代码@endsection解决了这个问题，因为所有的 JS 脚本都被加载了。

于 2018-06-10T12:12:52.423 回答