带有js的刀片倒计时答案

【问题标题】：Countdown in blade with js带有js的刀片倒计时
【发布时间】：2020-02-29 20:28:42
【问题描述】：

我在 laravel Blade 中遇到了这个问题。我有一个项目，有机会赞助公寓以提高知名度。根据选择的计划，赞助持续 24 72 或 144 小时。现在我想做一个倒计时，显示赞助结束时还剩多少时间。这是我在刀片中的代码：

@foreach (DB::table("apartment_sponsorship")->where("apartment_id" ,"=" , $apartment->id) -> get() as $end_time_sponsor)
                  <p class="demo"></p>
                    <script>
                    var countDownDate = new Date("{{$end_time_sponsor -> end_time }}").getTime();
                    console.log(countDownDate)

                      // Update the count down every 1 second
                      var x = setInterval(function() {

                        // Get today's date and time
                        var now = new Date().getTime();



                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;

                        // Time calculations for days, hours, minutes and seconds
                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                        // Output the result in an element with id="demo"
                        $(".demo").text(days + "d " + hours + "h "
                        + minutes + "m " + seconds + "s ");



                      }, 1000);

                  </script> 
                      //test{{date('m-d-Y H:m:s', strtotime($end_time_sponsor -> end_time)) }} //

                  @endforeach

现在日志确认结束时间实际上是 2 个不同的日期，但是在页面上，所有公寓的倒计时都是相同的。可能是什么问题？

【问题讨论】：

标签： laravel laravel-blade countdown

【解决方案1】：

你需要修改你的foreach循环

`@foreach (DB::table("apartment_sponsorship")->where("apartment_id" ,"=" ,
 $apartment->id) -> get() as $end_time_sponsor)`

到

$query = DB::table("apartment_sponsorship")->where("apartment_id" ,"=" , $apartment->id)->get()
@foreach ($query as $end_time_sponsor)

【讨论】：

【解决方案2】：

请你试试这样 -

@php
    $end_time_sponsors = DB::table("apartment_sponsorship")
                          ->where("apartment_id" ,"=" , $apartment->id)
                          ->get()
@endphp

那么，

@foreach($end_time_sponsors as $end_time_sponsor)
    <p data-countdown="{{ date('Y/m/d', strtotime($end_time_sponsor->end_time)) }}">
        {{ date('Y/m/d', strtotime($end_time_sponsor->end_time)) }}
    </p>
@endforeach

在你的脚本标签中：

<script src="{{ asset('js/jquery.countdown.min.js') }}"></script>
<script>
    $('[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'));
       });
    });
</script>

下载jQueryCountdown

【讨论】：