使用jquery和php在foreach循环中倒计时，但没有显示正确的时间

Question

我有这个代码可以让我把我的比赛倒数到开始时间。

他们怎么都显示相同的倒计时时间。

每行都有自己的匹配ID。

问题如何确保倒数计时器适用于每一行而不是同一时间

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
            <div class="card-header">
            Featured
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered">
                    <tbody id="upandcoming">
                        <?php foreach ($races as $race) {?>
                            <tr>
                                <td></td>
                                <td><b>M<?php echo $race['meeting_number'];?></b></td>
                                <td><b>R<?php echo $race['racing_number'];?></b></td>
                                <td><b><?php echo $race['meeting_name'];?></b></td>
                                <td><div id="race<?php echo $race['race_id'];?>"></div>                             

                                </td>
                            </tr>

                        <?php }?>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
</div>

<?php foreach ($races as $race) {?>
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo date('M j, Y H:i:s', strtotime($race['racing_datetime']));?>").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);

// Output the result in an element with id="demo"
document.getElementById("race<?php echo $race['race_id'];?>").innerHTML =  hours + "h "
+ minutes + "m " + seconds + "s "; 

// If the count down is over, write some text 
if (distance < 0) {
    clearInterval(x);
        document.getElementById("race<?php echo $race['race_id'];?>").innerHTML = "EXPIRED";
    }
}, 1000);
</script>   
<?php }?>

Answer 1

通过打印出多个script标签，您将一遍又一遍地重新定义全球范围内的countDownDate，覆盖以前副本的值。所有计数器正在使用的值是设置的最后一个值。

输出多个脚本标签并重复代码，更不用说为每个脚本标签创建一个定时器，效率非常低。相反，我建议你将信息输出为一个数组，并在该数组上有一个定时器循环来创建所有倒计时。

<script>
// Set the date we're counting down to
var countdowns = [
<?php foreach ($races as $race) {?>
  {
    id: <?php $race['race_id'] ?>,
    date: new Date("<?php echo date('M j, Y H:i:s', strtotime($race['racing_datetime']));?>").getTime()
  }
<?php }?>
];

// Update the count down every 1 second
var timer = setInterval(function() {
  // Get todays date and time
  var now = Date.now();

  var index = countdowns.length - 1;

  // we have to loop backwards since we will be removing
  // countdowns when they are finished
  while(index >= 0) {
    var countdown = countdowns[index];

    // Find the distance between now and the count down date
    var distance = countdown.date - 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);

    var timerElement = document.getElementById("race" + countdown.id);

    // If the count down is over, write some text 
    if (distance < 0) {
      timerElement.innerHTML = "EXPIRED";
      // this timer is done, remove it
      countdowns.splice(index, 1);
    } else {
      timerElement.innerHTML =  hours + "h " + minutes + "m " + seconds + "s "; 
    }

    index -= 1;
  }

  // if all countdowns have finished, stop timer
  if (countdowns.length < 1) {
    clearInterval(timer);
  }
}, 1000);
</script>