Mostrar tempo decorrido em Várias DIVs com JS – Blog – Devdata Sistemas

Uma abordagem simples para exibir o tempo passado em várias divs é criar um array com os horários específicos que você deseja acompanhar e, em seguida, iterar por esse array, atualizando cada div individualmente com o tempo passado correspondente.

Aqui está um exemplo de como fazer isso:

<!DOCTYPE html>
<html>
<head>
    <title>Tempo passado desde horários específicos</title>
</head>
<body>
    <h1>Tempo passado desde horários específicos:</h1>
    <div id="resultado1"></div>
    <div id="resultado2"></div>
    <div id="resultado3"></div>

    <script>
        function calcularTempoPassado(horaEspecifica) {
            const agora = new Date();
            const horaEspecificaData = new Date(agora.toDateString() + " " + horaEspecifica);
            const diff = Math.floor((agora - horaEspecificaData) / 1000 / 60); // Diferença em minutos
            return diff;
        }

        // Função para mostrar o tempo passado em uma div específica
        function mostrarTempoPassado(horaEspecifica, divId) {
            const tempoPassado = calcularTempoPassado(horaEspecifica);
            const resultadoDiv = document.getElementById(divId);
            resultadoDiv.textContent = tempoPassado + " minutos desde " + horaEspecifica;
        }

        // Array com os horários específicos que você deseja acompanhar
        const horariosEspecificos = ["14:30", "12:00", "20:15"];

        // Atualizar o tempo a cada segundo para cada horário específico
        setInterval(function() {
            mostrarTempoPassado(horariosEspecificos[0], "resultado1");
            mostrarTempoPassado(horariosEspecificos[1], "resultado2");
            mostrarTempoPassado(horariosEspecificos[2], "resultado3");
        }, 1000);
    </script>
</body>
</html>

Neste exemplo, criamos três divs (<div id="resultado1"></div>, <div id="resultado2"></div>, <div id="resultado3"></div>) para exibir os resultados do tempo passado.

A função mostrarTempoPassado(horaEspecifica, divId) foi modificada para receber o horário específico e o ID da div onde o resultado será exibido. Agora, a função pode ser chamada com diferentes horários específicos e IDs de div para atualizar o conteúdo de cada div individualmente.

Usamos um array horariosEspecificos para armazenar os horários que desejamos acompanhar. Em seguida, dentro do setInterval, iteramos por esse array e chamamos mostrarTempoPassado() para atualizar cada div com os resultados correspondentes.

Essa abordagem permite exibir o tempo passado em várias divs sem precisar repetir o código. Você pode adicionar ou remover horários do array conforme necessário, e o código irá atualizar todas as divs automaticamente.

Related Posts