Jquery 多个 div 计数计时器。 一个结束，下一个开始，以此类推

Question

在 Jquery 中，我想创建多级明智的 COUNT-UP 计时器

例如，第一个 div 的计时器结束，下一个 div 的计时器开始，依此类推，直到最后一个 div...

主要要求。

• 所有 div 都有秒和小步舞曲计数计数器
• 一次只能使用一个 div 计数器。 一个结束，下一个 div 将开始计数器。
• 不同的 DIV 有不同的计时器计数

以下示例代码演示适用于第一个 DIV，但不适用于所有 DIV

以下是我的多个 DIV 的 HTMLCODE。 我想显示时间计数器的地方，例如 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 代码

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;
    }
}

问题：我可以让代码只对一个 DIV 起作用，而不能对所有的 DIV 起作用。

Answer 1

尝试以下代码。

我已经修改了代码以满足您的要求。 它只有 1 个适用于所有主 DIV 的功能。 您必须在开始时计算并提及 DIV 的长度。

让我知道这是否适合您。

 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>