Javascript Relógio em Javascript (Js) não aparece

navegador2 · 21 de março de 2021

Colegas segui o tutorial do Pr. Bruno na aula 38 de como fazer um relógio em Js, que aparece no google chrome conferi o código parece tudo ok, mas o display não aparece, só a dív que contém o mesmo.

Dei algum vacilo aqui? Segue o código

<script>

        function relogio() {
            var data=new Date(); // Pega tudo dia, hora, minuto, segundo...
            var hora=data.getHours(); // pega só a hora
            var minuto=data.getMinutes();
            var segundo=data.getSeconds();

            
            if (hora < 10) { // Coloca zero a esquerda se o número for menor que 0
                hora = "0" + hora;
            }if (minuto < 10) {
                minuto = "0" + minuto;
            }if (segundo < 10) {
                segundo = "0" + segundo;
            }

            var horas=hora+":"+minuto+":"+segundo; // Pré formata as horas separando com :

            document.getElementById("rel").value=horas;

            var tempo =setInterval (relogio, 1000); // Atualiza as horas do display a cada segundo.

        } // Fim da função relogio
    </script>

</head>

<body>

    <input type="text" id="rel"/>
    
</body>
</html>

Marcelo Calazans · 21 de março de 2021

@navegador2

Este abaixo que eu alterei, testei e aqui está funcionando:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<div id="rel"></div>

<script>
        function relogio() {
            var data=new Date(); // Pega tudo dia, hora, minuto, segundo...
            var hora=data.getHours(); // pega só a hora
            var minuto=data.getMinutes();
            var segundo=data.getSeconds();

            
            if (hora < 10) { // Coloca zero a esquerda se o número for menor que 0
                hora = "0" + hora;
            } if (minuto < 10) {
                minuto = "0" + minuto;
            } if (segundo < 10) {
                segundo = "0" + segundo;
            }

            var horas=hora+":"+minuto+":"+segundo; // Pré formata as horas separando com :

            document.getElementById("rel").innerHTML = horas;            

            var tempo =setInterval (relogio, 1000); // Atualiza as horas do display a cada segundo.

        } // Fim da função relogio
        relogio();
</script>
 
</body>
</html>

Qualquer dúvida sobre as correções, fique a vontade em perguntar.

Abraços.

navegador2 · 24 de março de 2021

Em 21/03/2021 às 16:57, Marcelo Calazans disse:

@navegador2

Este abaixo que eu alterei, testei e aqui está funcionando:



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<div id="rel"></div>

<script>
        function relogio() {
            var data=new Date(); // Pega tudo dia, hora, minuto, segundo...
            var hora=data.getHours(); // pega só a hora
            var minuto=data.getMinutes();
            var segundo=data.getSeconds();

            
            if (hora < 10) { // Coloca zero a esquerda se o número for menor que 0
                hora = "0" + hora;
            } if (minuto < 10) {
                minuto = "0" + minuto;
            } if (segundo < 10) {
                segundo = "0" + segundo;
            }

            var horas=hora+":"+minuto+":"+segundo; // Pré formata as horas separando com :

            document.getElementById("rel").innerHTML = horas;            

            var tempo =setInterval (relogio, 1000); // Atualiza as horas do display a cada segundo.

        } // Fim da função relogio
        relogio();
</script>
 
</body>
</html>