Home / Questions / 405766
Accepted
scorpions
Asked: 2021-11-12 05:13:51 +0800 CST 2021-11-12 05:13:51 +0800 CST

JavaScript Stopwatch

  • 772

I am trying to create a stopwatch in JavaScript , this works correctly, but I need it to add the minutes starting from 5, I have a counter initialized to 5 and another one that controls the minutes, but I need it to establish a span with minutes equal to 5 when the second counter is equal to the first and from there continue counting minutes...

I hope I have explained myself clearly. I attach my current code, since I can't get it to add the minutes after 5 min.

counters

var contador_segundos = 0;
var contador_minutos = 0;
var contador = 5;
var cronometro;
var tiempoContratado;

function(){
    if(contador_segundos == 60){
        contador_segundos = 0;
        contador_minutos++;
        contador++;
        
        if(contador == contador_minutos){
            minutos.innerHTML = contador;
            minutos.innerHTML = contador_minutos;
        }

        
        if(contador_minutos == 60){
            contador_minutos = 0;
        }
    }

    segundos.innerHTML = contador_segundos;

    contador_segundos++;

},1000);

UPDATE

cronometro = setInterval(function (){
                    if(cronometro >= startMin){
                        sec++;
                        if(sec == 60){
                            min++;
                            sec = 0;
                            if(min == 60){
                                hour++;
                                min = 0;
                            }
                        }
                    }
                    console.log(sec);
                    minutos.innerHTML = min
                }, 1000);

Thanks in advance.

javascript

2 Answers

  1. The problem I see is that you are increasing the counter++ and counter_minutes++ variables, therefore, they will never be the same :)

    Aren't you using interval?

    I did the test and your code works fine for me making the modifications that I mentioned

    var contador_segundos = 0;
var contador_minutos = 0;
var contador = 5;
var cronometro;
var tiempoContratado;


function tiempo(){
    if(contador_segundos == 60){
        contador_segundos = 0;
        contador_minutos++;

        if(contador == contador_minutos){
            minutos.innerHTML = contador;
            minutos.innerHTML = contador_minutos;
            console.log("ok");
        }


        if(contador_minutos == 60){
            contador_minutos = 0;
        }
    }
    segundos.innerHTML = contador_segundos;
    contador_segundos++;
    console.log(contador_segundos);
};


setInterval(tiempo,1000);
    • 3
  2. Best Answer

    Look this is what I did:

    The first thing I have directly called an anonymous function giving it an interval of 1 second, in that second it verifies that the initial timer variable is greater than or equal to that of 5 minutes, if not, it increases until it is fulfilled. Once this condition is met, it is nothing more than starting to increase and count mins, secs and hours, even in this case you did not ask for it but there you have it :-). Hope this can help you

    hasta5Min = document.getElementById("hasta5Min");
        despues5Min = document.getElementById("despues5Min");
        // Declaro variables para después de los 5 minutos.
        let sec= 0, min = 0, hour = 0;
        // Para contar hasta los 5 minutos
        let startMin = 5*60, cronometro = 0;
        // Creo la funcion
        setInterval(function (){
            if(cronometro >= startMin){
                sec++;
                if(sec == 60){
                    min++;
                    sec = 0;
                    if(min == 60){
                        hour++;
                        min = 0;
                    }
                }
                console.log(`Ha pasado 5 Min. Empezamos a contar: ${hour} Horas, ${min} Minutos y ${sec} Segundos.`);
                hasta5Min.style.display = 'none';
                despues5Min.innerHTML = `Ha pasado 5 Min. Empezamos a contar: ${hour} Horas, ${min} Minutos y ${sec} Segundos.`;
            }else{
                cronometro++
                console.log(`Tiempo restante a 5 Min ${startMin - cronometro} segundos`);
                hasta5Min.innerHTML = `Tiempo restante a 5 Min → ${startMin - cronometro} segundos`;
            }
        },1000);
    <div id="hasta5Min" style="color: red; font-weight: bolder;"></div>
<div id="despues5Min" style="color: green; font-weight: bolder;"></div>

    • 1