带有 laravel 5.6 的 Hilios 倒数计时器答案

【问题标题】：Hilios countdown timer with laravel 5.6带有 laravel 5.6 的 Hilios 倒数计时器
【发布时间】：2018-11-19 19:21:30
【问题描述】：

我正在努力使用 Hilios 的 JQuery 倒数计时器，它是在 laravel 5.6 中安装的

我有生成值的 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>

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

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

【问题讨论】：

更奇怪的是：在这个 jsfiddle 中一切正常：jsfiddle.net/sb5fx2kj
更奇怪的是：我复制了您的确切代码并将其粘贴到我的本地主机上，它运行良好:))

标签： javascript jquery laravel jquery-countdown

【解决方案1】：

如果您的代码单独正确运行（例如在 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>

【讨论】：

【解决方案2】：

解决了问题。

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

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

【讨论】：