How to display count down in loop javascript?

Question

i have this in php file

<body>
     <span id="time"></span> 
</body>
<?php $var0 = 1; ?>

and this in javascript

   function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            if(minutes <= 0){
                 display.textContent = seconds + "s";
            }else{
                 display.textContent = minutes + "m " + seconds + "s";
            }


            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }
    window.onload = function () {

            var fiveMinutes = 60 * <?php echo $var0; ?>,
            display = document.querySelector('#time');
            startTimer(fiveMinutes, display);

    };

it works perfectly but i need to display this in a loop for example i have 2 variables and i want to display two times with new line .. or when i have n variables i got n new line with the time of the variables that will hold the information from database.. thank you

If it works perfectly, why can't you just call startTimer() twice for 2 variables? Or if you have multiple variables, why not try a for loop? — M -
– M -, Commented May 21, 2018 at 18:58
It works perfectly for one variable.. and how to use for loop.. in window.onload or where? — Alexandru Valentin
– Alexandru Valentin, Commented May 21, 2018 at 19:03
If you want multiple times displayed then you'll probably want to inject your <span>s dynamically each time you start a timer — DMcCallum83
– DMcCallum83, Commented May 21, 2018 at 19:33
I want to create a auction and the object to have a time when it expires. — Alexandru Valentin
– Alexandru Valentin, Commented May 21, 2018 at 19:48
Hey Alexandru, FYI you can post your working code as an answer on your question. The norm on Stack Overflow is to separate questions and answers -- see meta.stackoverflow.com/questions/319747/… or meta.stackexchange.com/questions/74101/… for more on that aspect of the site. — Brian
– Brian, Commented May 21, 2018 at 20:40

L0uis · Accepted Answer · 2018-05-21 20:02:19Z

Here's 5 spans updated on the fly...

<html>
<head>
    <title>Multiple Spans</title>
    <script type="text/javascript">

        var items = 5;
        function addSpans() {

        var element = document.getElementById("container");

            for (var i = 1; i < items; i++)
            {
                var div = document.createElement('div');
                var para = document.createElement('span');
                para.id = 'span' + i;
                div.appendChild(para);
                element.appendChild(div);
            }
        }
    function startTimer(duration, display) {
            var timer = duration, minutes, seconds;
            setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                var displayElement = document.getElementById("span" + display);

            if(minutes <= 0){
                displayElement.textContent = seconds + "s";
            }
            else {
                displayElement.textContent = minutes + "m " + seconds + "s";
            }


            if (--timer < 0) {
            timer = duration;
            }
            }, 1000);
        }

    window.onload = function () {
        addSpans();
        var fiveMinutes = 60; 
        for (var i = 1; i < items; i++) {
            startTimer(fiveMinutes, i);
        }


         </script>
</head>
<body>
    <div id="container"> 

    </div>
</body>
</html>

Alexandru Valentin · Accepted Answer · 2018-05-22 12:12:57Z

finally I solved the problem and I used this code I integrated with the table with here I can develop further

<table width="100%" cellspacing="0">
<tr>    
    <th class="topLine">Item(poza)</th>
    <th class="topLine">Owner</th>
    <th class="topLine">Ultimu Licitator</th>
    <th class="topLine">Pret</th>
    <th class="topLine">Timp</th>
    <th class="topLine">&nbsp;&nbsp;&nbsp;</th>
</tr>
<tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>

</tr>





<?php

$i =0;
foreach($auctions_inf as $auctions_information){

    $test = $auctions_information['date_expired'];
if($i%2==0) 
        {$class= "thell-a";}
        else{$class="tdunkel-a";}    

?>    
<tr class="thedata ">
    <td class="<?php echo $class; ?>">Poza mea</td>
    <td class="<?php echo $class; ?>">Zorke</td>
    <td class="<?php echo $class; ?>">Tot el</td>
    <td class="<?php echo $class; ?>">1200 yang</td>
    <td class="<?php echo $class; ?>">



<span id="countdown<?php echo $i;?>" class="timer"></span><br>

<script>
    var countDownDate<?php echo $i;?> = new Date("<?php echo $test;?>").getTime();

    var x<?php echo $i;?> = setInterval(function() {
        var now = new Date().getTime();
        var distance<?php echo $i;?> = countDownDate<?php echo $i;?> - now;
        var hours = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance<?php echo $i;?> % (1000 * 60)) / 1000);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;


        document.getElementById('countdown<?php echo $i;?>').innerHTML = hours +"h "+ minutes + "m " + seconds + "s ";

        if (distance<?php echo $i;?> < 0){
            clearInterval(x<?php echo $i;?>);
            document.getElementById('countdown<?php echo $i;?>').innerHTML = "Expirat";
        }


    }, 1000);

</script>  
 </td>
 <td class="<?php echo $class; ?>"> <button> Licitează </button></td>
</tr>



<?php    
  $i++;  
}


?>
</table>

Collectives™ on Stack Overflow

How to display count down in loop javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related