Question

下面是一个循环的结果，我想运行计时器来计算每个循环结果的设定时间。

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>

<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>

计时器脚本：

$(document).ready(function(){

  $('[data-time]').each(function() {
    console.log($(this))
    var $this = $(this),
      finalTime = $(this).data('time'),
      url       = $(this).data('url')

    // Set the date we're counting down to
    var countDownDate = new Date(finalTime).getTime();

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

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an 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);

      // Display the result in an element with id="demo"
      document.getElementById("time").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("time").innerHTML = "EXPIRED";
      }
    }, 1000);
  })
})

所以使用Laravel和jQuery来运行计时器。

我需要协助代码，因为它无效。

Answer 1

诀窍是＆＃34;保存＆＃34;你在数组中的间隔。
如果你不这样做，它会在每次循环迭代时被覆盖。

然后，要引用正确的span元素，您必须获得迭代index以供以后在.eq()方法中使用。
您无法在循环中使用id，因为它必须是唯一的。

查看代码中的评论。

＆＃13;

$(document).ready(function(){

  // an arrary to store the intervals created.
  var timerArray = [];

  $('[data-time]').each(function(index) {
    console.log($(this).data("time"));

    var finalTime = $(this).data('time');

    // Set the date we're counting down to
    var countDownDate = new Date(finalTime).getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // this Index will be used to refer to the right span.
      var thisIndex = index;
      console.log("interval "+thisIndex);

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an 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);

      // Leading zeros...
      if(hours<10){hours="0"+hours}
      if(minutes<10){minutes="0"+minutes}
      if(seconds<10){seconds="0"+seconds}

      // Display the result in an element with id="demo"
      $('[data-time]').eq(thisIndex).html( days + "d " + hours + "h " + minutes + "m " + seconds + "s " );

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(timerArray[thisIndex]);
        $('[data-time]').eq(thisIndex).html("EXPIRED");
      }
    }, 1000);

    // Place this timer in an array... So it won't be overwritten.
    timerArray.push(x);
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span data-time="07/08/2017 12:30:00"></span><br>
<br>
<span data-time="07/10/2017 19:50:30"></span><br>
<br>
<span data-time="07/12/2017 5:24:24"></span><br>
<br>

＆＃13;

在＆＃34;整页＆＃34;中运行代码段或者看看CodePen。

JavaScript计时器无法处理多个实例

1 个答案: