Блог

Главная - Вопросы по программированию - Таймер подсчета нескольких разделов Jquery. Один заканчивается, а следующий запускается и так далее

Таймер подсчета нескольких разделов Jquery. Один заканчивается, а следующий запускается и так далее

#javascript #jquery #timer

#javascript #jquery #таймер

Вопрос:

В Jquery я хочу создать многоуровневый таймер подсчета

Например, таймер для 1-го div заканчивается, а таймер для следующего div запускается и так далее до последнего div…

Основные требования.

  • У всех div будет счетчик подсчета секунд и менуэтов
  • Одновременно будет работать только один счетчик div. Один заканчивается, и следующий div начнет счетчик.
  • Для разных разделов существует разное количество таймеров

Следующий пример демонстрационного кода отлично работает для 1-го DIV, но не работает для всех последующих DIVs

Ниже приведен мой HTMLКОД для нескольких разделов. Где я хочу, например, показать счетчик времени 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, а не для всех.

Комментарии:

1. возможно, из-за того, что вы новичок, вы предоставляете слишком много информации. попробуйте выделить конкретные части, в которых у вас возникли проблемы. прямо сейчас трудно понять, что вы пытаетесь сделать.

2. Спасибо за ответ, на самом деле я хочу создать многоуровневый таймер подсчета. Я сделал демонстрацию, которая отлично работает для 1 DIV. Мне нужна некоторая модификация кода или ссылка, где я мог бы создать таймер подсчета для всех разделов. По одному за раз. Один заканчивается, а второй начинается.

Ответ №1:

Попробуйте следующий код.

Я изменил код в соответствии с вашими требованиями. У него есть только 1 функция, которая будет работать для всего вашего основного DIV. Вы должны посчитать и указать длину ваших DIVs при запуске.

Дайте мне знать, если это сработает для вас.

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