Exibir Data e Hora atual em HTML

JavaScript - ocultar e mostrar

A rotina abaixo exibe a data no formato 99/99/9999 e um relógio atualizados em tempo real.

Nesta rotina usamos a função setTimeout do JQuery para chamar a função atualizaRelogio  em segundo plano a cada 1000 mile segundos.

 

Veja o código:

<HTML>
	<HEAD><TITLE>Exibir Data e Hora em HTML </TITLE>
		<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
		<script type="text/javascript">
			jQuery(window).load(function($){
				atualizaRelogio();
			});
		</script>
	</HEAD>
	<BODY>
		<div>
			<output id="data" style="font-family: 'arial black', 'avant garde'; font-size: 24px;"></output>
		</div>
		<div>
			<output id="hora" style="font-family: 'arial black', 'avant garde'; font-size: 24px;"></output>				
		</div>			
	</BODY>
	<script>
		function atualizaRelogio(){ 
			var momentoAtual = new Date();
			
			var vhora = momentoAtual.getHours();
			var vminuto = momentoAtual.getMinutes();
			var vsegundo = momentoAtual.getSeconds();
			
			var vdia = momentoAtual.getDate();
			var vmes = momentoAtual.getMonth() + 1;
			var vano = momentoAtual.getFullYear();
			
			if (vdia < 10){ vdia = "0" + vdia;}
			if (vmes < 10){ vmes = "0" + vmes;}
			if (vhora < 10){ vhora = "0" + vhora;}
			if (vminuto < 10){ vminuto = "0" + vminuto;}
			if (vsegundo < 10){ vsegundo = "0" + vsegundo;}

			dataFormat = vdia + " / " + vmes + " / " + vano;
			horaFormat = vhora + " : " + vminuto + " : " + vsegundo;

			document.getElementById("data").innerHTML = dataFormat;
			document.getElementById("hora").innerHTML = horaFormat;

			setTimeout("atualizaRelogio()",1000);
		}
	</script>	
</HTML>

Veja o exemplo AQUI.

4 thoughts on “Exibir Data e Hora atual em HTML

  1. Bom dia, desculpe a amolação!

    Como posso usar “date_default_timezone_set(‘America/Sao_Paulo’)” em lugar de “newDate() “?

    Existe esta possibilidade ?

    Um abraço com os agradecimentos.

    Raul

  2. Bom dia, desculpe a amolação!

    Como posso usar “date_default_timezone_set(‘America/Sao_Paulo’)” em lugar de “newDate() “?

    Existe esta possibilidade ?

    Um abraço com os agradecimentos.

    Raul

    1. Boa tarde,
      você pode usar o método getTimezoneOffset().

      Olha um exemplo:

      const date3 = new Date().toLocaleString("pt-BR", {timeZone: "America/Sao_Paulo"});
      console.log(date3);

  3. let hora = new Date();
    document.body.innerHTML = “A hora agora é: ” + hora.getHours() + “:” + hora.getMinutes() + “”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.