Neste artigo vou mostrar, de uma forma simples e em poucas linhas de código, como podemos obter e mostrar a data e a hora em qualquer pagina da web. Para isso mostrarei alguns dos métodos disponiveis em JavaScript para trabalharmos com a data e a hora e explicar a função de cada um deles. Ao final do artigo disponibilizarei o código que montei utilizando um bloco de notas simples, e explicarei o código, para que você aprenda e assim possa fazer um código que atenda a sua necessidade.
Vamos ao trabalho!!!
Para pegarmos a data e hora é necessário criar um novo objeto que irá receber a data e hora.
Exemplo: agora = new Date();
Nesta linha de código retorna a data e hora no seguinte formato: Dia da Semana (0..6), Mês (0..11), Hora, Minuto, Segundos (h:m:s) e Ano.
Alguns Métodos Necessários:
getMonth(); - Retorna o número do mês, em valores de 0 a 11 onde 0 é referente a Janeiro.
Exemplo: mes = agora.getMonth();
getDate(); - Retorna o número do dia, considerando o mês os valores podem ser de 1 a 31.
Exemplo: dia = agora.getDate();
getDay(); - Retorna o número da semana, em valores de 0 a 6 onde 0 se refere ao Domingo.
Exemplo: semana = agora.getDay();
getHours(); - Obtém um número correspondente a hora, em valores de 0 a 23.
Exemplo: hora = agora.getHours();
getMinutes(); - Obtém um número referente ao minutos, em valores de 0 a 59.
Exemplo: min = agora.getMinutes();
getSeconds(); - Obtém um número referente aos segundos, em valores de 0 a 59.
Exemplo: sec = agora.getSeconds();
getFullYear(); - Este é o método atual onde retorna o ano atual com os 4 dígitos, utilizado para 1900 em diante. Antigamente era utilizado o método getYear(), porem este método retorna apenas 2 dígitos e funciona perfeitamente até o ano de 1999.
Exemplo: ano = agora.getFullYear();
Estes são alguns dos métodos que podemos utilizar quando precisamos trabalhar com a data e hora.
Agora vamos colocar eles em prática.
Mostrando data e hora atualizada
1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--define o tipo de codificação como UTF-8 para mostrar corretamente acentos -->
2: <html>
3: <head>
4: <script language=javascript type="text/javascript">
5: dayName = new Array ("Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sabado");
6: monName = new Array ("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");
7:
8: function time(){
9: hora = new Date();
10: h=hora.getHours();
11: m=hora.getMinutes();
12: s=hora.getSeconds();
13: document.getElementById('txt').innerHTML=h+":"+m+":"+s;
14: setTimeout('time()',500); //Executa o código a cada 500 milésimos de segundos.
15: }
16: </script>
17: </head>
18: <body onLoad="time()">
19: <script language=javascript type="text/javascript">
20: now = new Date();
21: document.write("<h1> Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ] + " de " + now.getFullYear () + ". </h1>");
22: </script>
23: <div id="txt"></div>
24: </body>
25: </html>
Código em funcionamento:
Explicando o código:
Neste trecho criei dois arrays um para o dia da semana e outro para o mês, o array recebe o número correspondente e retorna o nome do dia ou do mês.
dayName = new Array ("Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sábado");
monName = new Array ("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");
Para pegar a hora em tempo real, ou seja a hora atualiza automaticamente, utilizei a função time().
function time(){
hora = new Date();
h=hora.getHours();
m=hora.getMinutes();
s=hora.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout('time()',500); //Executa o código a cada 500 milésimos de segundos.
}
A function funciona da seguinte forma, ela pega os dados da hora, minuto e segundo e encaminha para o elemento “txt” da página html, no caso este elemento é uma div. E em cada 500 milésimos de segundos o código é executado novamente e assim atualizando a hora na página.
<body onLoad="time()"> Neste trecho do código faz com que a function time seja executada assim que a página for carregada.
E esta foi uma breve introdução, para iniciantes, de como podemos utilizar o objeto Date em páginas web.
