希利奥斯倒数计时器与拉拉维尔 5.6

Question

我正在努力使用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>

问题是它根本无法正常工作，更糟糕的是 - 我在控制台中没有收到任何错误......

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

Answer 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>

Answer 2

解决了问题。

这比任何人都能做到的要容易得多，而且很明显......

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