jQuery多个divs递增计时器一个结束，下一个开始，依此类推

问题描述

在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,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。

解决方法

尝试以下代码。

我已修改代码以符合您的要求。它只有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>