Como posso converter o valor desse contador para hora:minuto:segundo | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Daniel Vargas Ribeiro

| 76k xp | 13 posts

<!DOCTYPE html>
<html>
<body>

<p>Veja abaixo a hora atual atualizada a cada segundo:</p>

<button onclick="meuRelogio()">Iniciar Relógio</button>

<button onclick="pararRelogio()">Parar Relógio</button>

<h2 id='rel'></h2>

<script>

var temporizador = 0;

function meuRelogio() {
    var hora = temporizador++;
    document.getElementById('rel').innerHTML = hora;
    temporizador = setTimeout(meuRelogio, 1000);
}

function pararRelogio() {
    clearTimeout(temporizador);
}

</script>

</body>
</html>

2 respostas

por Dayan Freitas

| 167.2k xp | 10 posts

Desenvolvedor Full Stack Junior

24/11/2020

Boa noite, Daniel Vargas Ribeiro. Sugiro implementar algo do tipo:

function converte (segundo) {
    const FATOR_DE_CONVERSAO_HORAS    = 3600;
    const FATOR_DE_CONVERSAO_MINUTOS  = 60;
    const FATOR_DE_CONVERSAO_SEGUNDOS = 60;
    const horas = (segundo/FATOR_DE_CONVERSAO_HORAS)
    const h = {
        horas_inteiras: Math.trunc(horas), 
        horas_quebradas: (horas % 1), 
    }

    const minutos = (h.horas_quebradas * FATOR_DE_CONVERSAO_MINUTOS)
    const m = {
        minutos_inteiros: Math.trunc(minutos),
        minutos_quebrados: minutos % 1,
    }
    const s = Math.floor((m.minutos_quebrados * FATOR_DE_CONVERSAO_SEGUNDOS))

    console.log('HORAS:::', h.horas_inteiras)
    console.log('MINUTOS:::', m.minutos_inteiros)
    console.log('SEGUNDOS:::', s)

    return `${h.horas_inteiras} ${m.minutos_inteiros} ${s}`

}

Deve ficar algo assim:

<!DOCTYPE html>
<html>
<body>

<p>Veja abaixo a hora atual atualizada a cada segundo:</p>

<button onclick="meuRelogio()">Iniciar Relógio</button>

<button onclick="pararRelogio()">Parar Relógio</button>

<h2 id='rel'></h2>

<script>

var temporizador = 0;
function meuRelogio() {
    var hora = temporizador++;
    document.getElementById('rel').innerHTML = hora;
    temporizador = setTimeout(meuRelogio, 1000);
}

function pararRelogio() {
    //console.log(temporizador)
    document.getElementById('rel').innerHTML = converte(temporizador);

    clearTimeout(temporizador);
}

function converte (segundo) {
    const FATOR_DE_CONVERSAO_HORAS    = 3600;
    const FATOR_DE_CONVERSAO_MINUTOS  = 60;
    const FATOR_DE_CONVERSAO_SEGUNDOS = 60;
    const horas = (segundo/FATOR_DE_CONVERSAO_HORAS)
    const h = {
        horas_inteiras: Math.trunc(horas), 
        horas_quebradas: (horas % 1), 
    }

    const minutos = (h.horas_quebradas * FATOR_DE_CONVERSAO_MINUTOS)
    const m = {
        minutos_inteiros: Math.trunc(minutos),
        minutos_quebrados: minutos % 1,
    }
    const s = Math.floor((m.minutos_quebrados * FATOR_DE_CONVERSAO_SEGUNDOS))

    console.log('HORAS:::', h.horas_inteiras)
    console.log('MINUTOS:::', m.minutos_inteiros)
    console.log('SEGUNDOS:::', s)

    return `${h.horas_inteiras}:${m.minutos_inteiros}:${s}`

}
</script>

</body>
</html>

solução!

por Akashi

| 220.4k xp | 284 posts

25/11/2020

Daniel,

veja se é isso que quer implementar:

<!DOCTYPE html>
<html>
<body>

<p>Veja abaixo a hora atual atualizada a cada segundo:</p>

<button onclick="meuRelogio()">Iniciar Relógio</button>

<button onclick="pararRelogio()">Parar Relógio</button>

<h2 id='rel'></h2>

<script>

    var temporizador = 0;

    function meuRelogio() {

    var agora = new Date();
    console.log(agora)
    var h = agora.getHours(0);
    var m = agora.getMinutes(0);
    var s = agora.getSeconds(0);

    h = zeroAntes(h);
    m = zeroAntes(m);
    s = zeroAntes(s);
    document.getElementById('rel').innerHTML =
    h + ":" + m + ":" + s;
    temporizador = setTimeout(meuRelogio, 500);
    }

    function zeroAntes(i) {
    if (i < 10) {i = "0" + i};
    return i;
    }

    function pararRelogio() {
    clearTimeout(temporizador);
    }

</script>

</body>
</html>