倒计时时间数据未显示在JavaScript php mysqli中的每个循环卡中-解网

问：

我已经创建了一张卡片，并希望显示同一表的每一行的时间倒计时，并且循环运行良好，但计时器仅适用于第一个循环，然后它不适用于其他循环，不显示时间倒计时。

第一个循环很好，就像......

100$套餐计划 2.50$ 每日收入时间： 19h13m15s

但是第二个循环显示没有时间，例如..

25$套餐计划 0.63$ 每日赚取时间：

需要显示interval_time列获取的每个循环数据的时间倒计时。需要帮助。

这是我的php代码 `

    foreach($getActivePackages as $data){
    $status= $data['status'];
    $pack_term=$data['pack_term'];
    $packId =$data['id'];
    $interval_time =$data['interval_time'];
    $splitTimeStamp = explode(" ",$interval_time);
    $date = $splitTimeStamp[0];
    $time = $splitTimeStamp[1];
    $getPackageTerm = $getData->specificItem('pack', 'id', $pack_term);
    foreach($getPackageTerm as $row){
    $amount= $row['amount'];
    $days   =$row['days'];
    $interest = $row['daily_percentage'];
    $withdrawamount = ($amount*$interest)/100;
    $totalWithdraw = $withdrawamount+$amount;
    $dailyAmount = $totalWithdraw/$days ;
    $dailyAmount =number_format($dailyAmount, 2);
    }
    $data = strtotime($date);
    $getDate = date(" Y, F, d", $data);

[HTML全 `

    <div class="col-4 col-sm-12 col-xl-4 text-center text-xl-right">
    <p class="font-weight-normal" id="counter"></p>
    </div>

JS公司

    <script>
    var countDownDate = new Date("<?php echo "$getDate $time"; ?>").getTime();
    var x = setInterval(function() {
    var now = new Date().getTime();
    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);
    document.getElementById("counter").innerHTML =hours +"Hours" + minutes + " min " + seconds + "s ";
    // If the count down is over, write some text 
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("counter").innerHTML = "EXPIRED";
    }
    }, 1000);
    </script>
    <?php } ?>

尝试循环 document.getElementById（“counter”）也将 JS 放入循环中，但结果是检索相同的循环数据，但时间没有显示在每个循环数据中。

javascript php mysqli

答：

-1赞 vijendra 8/14/2023 #1

之所以会出现此问题，是因为您在循环的每次迭代中重复使用相同的 JavaScript 变量名称，从而导致计时器之间发生冲突。您可以通过为每个计时器和相应元素动态生成唯一 ID 来解决此问题。

下面是代码的更新版本，应该适用于为表中的每一行显示单独的倒数计时器：

    <?php
foreach($getActivePackages as $data){
    $status= $data['status'];
    $pack_term=$data['pack_term'];
    $packId =$data['id'];
    $interval_time =$data['interval_time'];
    $splitTimeStamp = explode(" ",$interval_time);
    $date = $splitTimeStamp[0];
    $time = $splitTimeStamp[1];
    $getPackageTerm = $getData->specificItem('pack', 'id', $pack_term);
    foreach($getPackageTerm as $row){
        $amount= $row['amount'];
        $days   =$row['days'];
        $interest = $row['daily_percentage'];
        $withdrawamount = ($amount*$interest)/100;
        $totalWithdraw = $withdrawamount+$amount;
        $dailyAmount = $totalWithdraw/$days ;
        $dailyAmount =number_format($dailyAmount, 2);
    }
    $countDownDate = strtotime($date . ' ' . $time); // Move this line inside the outer loop
    $counterId = "counter_" . $packId; // Generate a unique ID for each timer
    $formattedDate = date(" Y, F, d", $countDownDate);
    echo '<div id="' . $counterId . '">' . $formattedDate . '</div>';
}
?>

<script>
<?php
foreach($getActivePackages as $data){
    $packId =$data['id'];
    $counterId = "counter_" . $packId;
    echo 'var countDownDate_' . $packId . ' = new Date("' . $formattedDate . '").getTime();';
    echo 'var x_' . $packId . ' = setInterval(function() {';
    echo 'var now = new Date().getTime();';
    echo 'var distance = countDownDate_' . $packId . ' - now;';
    echo 'var hours = Math.floor(distance / (1000 * 60 * 60));';
    echo 'var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));';
    echo 'var seconds = Math.floor((distance % (1000 * 60)) / 1000);';
    echo 'document.getElementById("' . $counterId . '").innerHTML = hours + " Hours " + minutes + " min " + seconds + "s ";';
    echo 'if (distance < 0) {';
    echo 'clearInterval(x_' . $packId . ');';
    echo 'document.getElementById("' . $counterId . '").innerHTML = "EXPIRED";';
    echo '}';
    echo '}, 1000);';
}
?>
</script>

上一个：如何显示警报消息 [已关闭]

下一个：使用 PHP 和 AJAX 检查数据库更新

倒计时时间数据未显示在JavaScript php mysqli中的每个循环卡中

countdown time data not showing in every loop card in JavaScript php mysqli

评论