Question

所以我试图从数据库中为每个值倒计时。该值以秒为单位，我希望倒计时（让我们说 100 ）到 0 ，然后显示已完成

然而，当我尝试这个时，我的结果变得混乱，并且没有以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文件中

多个值的PHP jQuery倒计时

1 个答案: