多个值的PHP jQuery倒计时

Question

所以我试图对数据库中的每个值进行倒计时。该值以秒为单位，我想从（比如说 100）倒计时到 0，然后显示 Finished

但是，当我尝试这样做时，我的结果变得一团糟，并且没有以 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文件中