PHP jQuery countdown for multiple values

Question

So I am trying to have a countdown for each value from a database. The value is in seconds and i am wanting to countdown from (let's say 100) to 0 and then display Finished

However, when I tried this my results got all muddled up and were not counting down in intervals of 1 second. If there were 3 results then it counted down in intervals of 3. I apologise in advance for my lack of knowledge regarding this.

This is my code for it all

<?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
?>

PHP runs, then JS runs. You should output the page then send ajax requests to get the data you need in the intervals you want. i.sstatic.net/8uaXY.gif — chris85
– chris85, Commented Aug 5, 2015 at 1:19

charlietfl · Accepted Answer · 2015-08-05 02:01:33Z

1

First thing I would suggest is not coupling php code with javascript. It makes it much harder to read and harder to maintain.

This can all be done by using a common class on the common elements. As for the interval times we can add those directly to the elements using data- attributes

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 is now separated from server code and can be placed in same file or external js file

edited Aug 5, 2015 at 2:01

answered Aug 5, 2015 at 1:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Patrick Over a year ago

How could I make it add the class "disabled" to the button bellow it once it is Finished?

charlietfl Over a year ago

$(this).next().find('button').prop('disabled', true)

Patrick Over a year ago

Thanks again buddy, I really appreciate the help. :)

Patrick Over a year ago

sorry to bug you but the "Finished thing doesnt work" :/ Any idea why? It just stays at 0.

charlietfl Over a year ago

ok...use the -1 to kill timer instead of 0 ...that's if you want to see 0. Otherwise change >=0 to >0 and leave timer alone

|

Collectives™ on Stack Overflow

PHP jQuery countdown for multiple values

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related