带有js的刀片倒计时

Question

我在laravel刀片中有这个问题。我有一个项目，可以借此机会赞助公寓以提高知名度。根据选择的计划，赞助会持续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

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

Answer 1

您需要从以下位置修改foreach循环

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

to

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

Answer 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