Laravel 中的倒计时

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30411472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 11:36:43  来源:igfitidea点击:

Countdown in Laravel

jquerylaravelcountdown

提问by jc1992

I am making a countdown in Laravel with a plugin , I have the following code with javascript

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

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

This code works correctly but I need to show the diferents finnishes dates in Laravel

此代码工作正常,但我需要在 Laravel 中显示不同的芬兰日期

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

How could I pass the date with the item startdate to Javascrip countdown ? Because I recieve the same format in database.

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

回答by Alexandru Trandafir Catalin

You can use this method:

您可以使用此方法:

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

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:

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'));
   });
});

So basically you would need to add a data attribute to each of your products SPAN and print the date inside:

所以基本上你需要为你的每个产品 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

And then update your javascript to loop all the elements and use the attribute as the date. You could use the JS code above and adjust, if you want, the attribute name and variables name or the format text.

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