PHP多次值的jQuery倒计时

Question

因此，我试图对数据库中的每个值进行倒计时。值以秒为单位，我想倒计时从(假设100)到，然后显示已完成的

然而，当我尝试这样做的时候，我的结果被弄得一团糟，并且没有每隔1秒计算一次。如果有3结果，则按3间期进行计数。我为我对这件事缺乏了解而提前道歉。

这是我的密码

<?php

    $curtime = date("Y-m-d h:i:s");
    $curtime = strtotime("$curtime UTC");
    if (logged_in() === true){

        $results = $dbc->query($sql);

        while ($attacks = mysqli_fetch_array($results)){
            $attime = $attacks['date'] - ($attacks['length'] + $curtime);

?>

<tr>
    <td class="text-left"><?php echo $attacks['attack_ip'];?></td>
    <td class="text-left"><?php echo $attacks['port'];?></td>
    <td class="text-left"><?php echo $attacks['method'];?></td>

    //////This is where the countdown is//////
    <td id="<?php echo $attacks['attack_id'];?>" class="text-left"><?php echo $attime;?></td>
    <td><button type="button" class="btn btn-effect-ripple btn-square btn-danger">Stop</button></td>
</tr>

<script type="text/javascript">

    var sec = <?php echo $attime;?>;
    var timer = setInterval(function() { 
       $('td#<?php echo $attacks['attack_id'];?>').text(sec--);
       if (sec == -1) {
          $('td#<?php echo $attacks['attack_id'];?>');
          clearInterval(timer);
       }
       if (sec == -1) {
          $('td#<?php echo $attacks['attack_id'];?>').html("<b>Finished</b>");
          clearInterval(timer);
       }
    }, 1000);

</script>


<?php 
        } //End WHILE

    }//END IF
?>

Answer 1

首先，我建议不要将php代码与javascript耦合。这使得阅读变得更加困难，维护起来也更加困难。

这一切都可以通过在公共元素上使用公共类来完成。至于间隔时间，我们可以使用data-属性直接将这些时间添加到元素中。

HTML

<td class="text-left my-timer" data-time="<?php echo $attime;?>"><?php echo $attime;?></td>

JS

$(function(){
    // loop over each element to activate
    $('td.my-timer').each(function(){
          // "this" inside "each" is current element
          var $elem = $(this), 
               // get the time value stored in data-time attribute
               sec = +$elem.data('time');
          // instance specific interval
          var timer = setInterval(function() {
             sec--;
             var html = sec >= 0 ? sec : "<b>Finished</b>";
             $elem.html(html);
             if( sec === 0){
                clearInterval(timer);
             }

          },1000);
    });

});

JS现在与服务器代码分离，可以放在同一个文件或外部js文件中。