Laravel 倒计时

Question

我正在使用插件在 Laravel 中进行倒计时，我有以下代码 javascript

 <script type="text/javascript">
  $('.clock').countdown('2015/05/25', function(event) {
   $(this).html(event.strftime('%D días %H:%M:%S'));
 });
 </script>

此代码工作正常，但我需要在 Laravel

中显示不同的芬兰语日期

@foreach ($products as $subasta)
    {{ $subasta->id }}</p>
    {{ $subasta->name}}</p>
    {{ $subasta->startdate}}</p>
    {{ $subasta->duration}}</p>
    <span class="clock"></span>
@endforeach

如何将带有项目开始日期的日期传递给 Javascrip 倒计时？因为我在数据库中收到相同的格式。

Answer 1

你可以使用这个方法：

http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html

Html:

<div data-countdown="2016/01/01"></div>
<div data-countdown="2017/01/01"></div>
<div data-countdown="2018/01/01"></div>
<div data-countdown="2019/01/01"></div>

JS:

$('[data-countdown]').each(function() {
   var $this = $(this), finalDate = $(this).data('countdown');
   $this.countdown(finalDate, function(event) {
     $this.html(event.strftime('%D days %H:%M:%S'));
   });
});

所以基本上您需要为每个产品 SPAN 添加一个数据属性并在其中打印日期：

@foreach ($products as $subasta)
    {{ $subasta->id }}</p>
    {{ $subasta->name}}</p>
    {{ $subasta->startdate}}</p>
    {{ $subasta->duration}}</p>
    <span class="clock" data-countdown="{{ $subasta->startdate}}"></span>
@endforeach

然后更新您的 javascript 以循环所有元素并使用属性作为日期。您可以使用上面的 JS 代码，并根据需要调整属性名称和变量名称或格式文本。

Laravel 倒计时

Countdown in Laravel

jquery

countdown

laravel