Jquery multiple divs countup timer. One ends and next one starts and so on

Question

In Jquery I want to create multilevel level wise COUNT-UP Timer

For example timer for 1st div ends and timer for next div starts and so on till last div...

Main requirements.

• All div will have seconds and minuets count-up counter
• Only one div counter will work at a time. One ends and next div will start counter.
• Different timer counts are there for different DIVs

Following sample code demo works fine for 1st DIV but not working next all DIVs

Following is my HTMLCODE for multiple DIVs. Where I want to show time up counter for example 00:01 => 00:02 => .. => 00:60 =

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div_1"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_2"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_3"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <script type="text/javascript"> var totalSeconds = 0; var div_1 = "div_1"; var timer_1_start = 0; var timer_1_limit = 05; var div_2 = "div_2"; var timer_2_start = 05; var timer_2_limit = 10; var div_3 = "div_3"; var timer_3_start = 10; var timer_3_limit = 20; var div_1_pointer = setInterval( function(){ console.log(' ------> Inner function to setInterval for '+div_1); w3n_setTime(div_1,div_1_pointer,timer_1_start,timer_1_limit); }, 1000 ); /* var div_2_pointer = setInterval( function(){ console.log(' ------> Inner function to setInterval for '+div_1); w3n_setTime(div_2,div_2_pointer,timer_2_start,timer_2_limit); }, 1000 ); */ function w3n_setTime(div_id,div_pointer,timer_start,timer_limit){ // console.log(" total mins ==> "+pad(parseInt(totalSeconds / 60)) ); // console.log(" total seconds ==============> "+pad(totalSeconds % 60)); if(parseInt(pad(totalSeconds % 60)) === parseInt(timer_limit)){ console.log(" Timer complete for "+div_id); clearInterval(div_pointer); $('#'+div_id+' div#done').html("Done"); } ++totalSeconds; //secondsLabel.innerHTML = pad(totalSeconds % 60); //minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60)); $('#'+div_id+' span#seconds').text(pad(totalSeconds % 60)); $('#'+div_id+' span#minutes').text(pad(parseInt(totalSeconds / 60))); } function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } } </script>

01:01

<div id="div_1">
        <span id="minutes">00</span>:<span id="seconds">00</span> 
        <div id="done"></div>
    </div>
    <hr/>

<div id="div_2">
    <span id="minutes">00</span>:<span id="seconds">00</span> 
    <div id="done"></div>
</div>
<hr/>

<div id="div_3">
    <span id="minutes">00</span>:<span id="seconds">00</span> 
    <div id="done"></div>
</div>

Jquery/JavaScript Code

var totalSeconds = 0;

var div_1 = "div_1";
var timer_1_start = 0;
var timer_1_limit = 05;

var div_2 = "div_2";
var timer_2_start = 05;
var timer_2_limit = 10;

var div_3 = "div_3";
var timer_3_start = 10;
var timer_3_limit = 20;

var div_1_pointer = 
    setInterval( 
        function(){
            console.log(' ------> Inner function to setInterval for '+div_1); 
            w3n_setTime(div_1,div_1_pointer,timer_1_start,timer_1_limit); 
        }, 
    1000 );
    

/*
var div_2_pointer = 
    setInterval( 
        function(){
            console.log(' ------> Inner function to setInterval for '+div_1); 
            w3n_setTime(div_2,div_2_pointer,timer_2_start,timer_2_limit); 
        }, 
    1000 );
*/      


function w3n_setTime(div_id,div_pointer,timer_start,timer_limit){
    
    // console.log(" total mins ==> "+pad(parseInt(totalSeconds / 60)) );
    // console.log(" total seconds  ==============> "+pad(totalSeconds % 60));
    
    if(parseInt(pad(totalSeconds % 60)) === parseInt(timer_limit)){
        
        console.log(" Timer complete for "+div_id);
        clearInterval(div_pointer); 
        $('#'+div_id+' div#done').html("Done");
        
    }
    
    ++totalSeconds;

    //secondsLabel.innerHTML = pad(totalSeconds % 60);
    //minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
    
    $('#'+div_id+' span#seconds').text(pad(totalSeconds % 60));
    $('#'+div_id+' span#minutes').text(pad(parseInt(totalSeconds / 60)));

    
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}

Issue : I am able to make code work for one DIV only and not for all.

Answer 1

Try following code.

I have modified code to match your requirements. It has only 1 function which will work for all your main DIV. You have to count and mention length of your DIVs in starting.

Let me know if this works for you.

 var totalSeconds = 0; var game_timer = Array(1,1,1); // time in mins var game_level = 1; // for start level var div_pointer = setInterval( function(){ var c = game_timer.length; // total game level if(parseInt(pad(totalSeconds / 60)) == game_timer[game_level-1]) { $('#div_'+game_level+' div#done').html("Done"); game_level ++; totalSeconds=0; } if(game_level==c && parseInt(pad(totalSeconds / 60)) === parseInt(game_timer[c-1])){ clearInterval(div_pointer); } ++totalSeconds; $('#div_'+game_level+' span#seconds').text(pad(totalSeconds % 60)); $('#div_'+game_level+' span#minutes').text(pad(parseInt(totalSeconds / 60))); }, 1000 ); function pad(val) { var valString = val + ""; if (valString.length < 2) { return "0" + valString; } else { return valString; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div_1"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_2"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div> <hr/> <div id="div_3"> <span id="minutes">00</span>:<span id="seconds">00</span> <div id="done"></div> </div>