![[TUTORIAL & CÓDIGO] Relógio em JavaScript Empty](https://2img.net/i/empty.gif)
[TUTORIAL & CÓDIGO] Relógio em JavaScript 04.09.17 21:54
Olá caro(a) Convidado, hoje nós vamos aprender a como fazer um relógio utilizando HTML e JavaScript, é bem simples, interessante e legal. Você vai gostar!
O resultado final ficará mais ou menos assim:
![[TUTORIAL & CÓDIGO] Relógio em JavaScript Relogio](https://2img.net/h/www.codigomaster.com.br/wp-content/uploads/2015/07/relogio.png)
De início, vamos criar um arquivo .js, chamado relogio.js. Nele, terá a função JavaScript responsável por manipular o relógio na página. Abra o arquivo relogio.js, e cole o seguinte código:
- Código:
function relogio()
{
///////////////////////////////////////////////////////////////////////////////////////////////////
var momentoAtual = new Date();
///////////////////////////////////////////////////////////////////////////////////////////////////
var ano = momentoAtual.getFullYear();
var mes = momentoAtual.getMonth();
var dia = momentoAtual.getDate();
var hora = momentoAtual.getHours();
var minuto = momentoAtual.getMinutes();
var segundo = momentoAtual.getSeconds();
///////////////////////////////////////////////////////////////////////////////////////////////////
if(segundo <=9 ){ segundo = "0"+segundo; };
if(minuto <=9 ){ minuto = "0"+minuto; };
if(hora <=9 ){ hora = "0"+hora; };
///////////////////////////////////////////////////////////////////////////////////////////////////
switch(mes){
case 0: mestxt = "Janeiro"; break;
case 1: mestxt = "Fevereiro"; break;
case 2: mestxt = "Março"; break;
case 3: mestxt = "Abril"; break;
case 4: mestxt = "Maio"; break;
case 5: mestxt = "Junho"; break;
case 6: mestxt = "Julho"; break;
case 7: mestxt = "Agosto"; break;
case 8: mestxt = "Setembro"; break;
case 9: mestxt = "Outubro"; break;
case 10: mestxt = "Novembro"; break;
case 11: mestxt = "Dezembro"; break;
}
///////////////////////////////////////////////////////////////////////////////////////////////////
document.getElementById('hora').innerHTML = hora +":"+ minuto +":"+ segundo;
document.getElementById('data').innerHTML = dia + " de " + mestxt + " de " + ano;
///////////////////////////////////////////////////////////////////////////////////////////////////
setTimeout("relogio()",1000);
}
No código acima, estamos fazendo o seguinte:
• Criando uma nova data em JavaScript;
• Estamos criando as variáveis de controle da data;
• Acrescentando o zero antes dos números de 0 a 9, para fiquem em formato correto, com dois números, ex.: 00,01,02…09,10..;
• Estamos validando a variável mes, para que de acordo com o ela, exibiremos o nome do mês correspondente;
• Manipulamos os elementos que exibirão o relógio na página;
• Realizamos a chamada à mesma função relogio(), após 1 segundo (1000 ms), o que criará a contagem no relógio;
Agora, vamos ao arquivo .html, e criar os elementos que exibirão nosso relógio. Para tal, crie um novo arquivo HTML, chamado relogio.html. Neste arquivo, conterá o CSS, que dará um estilo ao relógio, a referência ao nosso arquivo JavaScript, relogio.js, e o HTML propriamente dito, com os elementos do relógio.
Abra o relogio.html, e dentro do arquivo cole esse código:
- Código:
<html>
<head>
<title>Relógio</title>
<style type="text/css">
.relogio{
width: 120px;
border:solid 1px #ccc;
text-align:center;
font-family: 'Source Sans Pro', sans-serif;
color: #868686;
margin:0 2px 0 2px;
padding:0 5px 0 5px;
}
.relogio #titulo{ font-weight:bold; font-size:14px; }
.relogio #hora{ color: #00a3da; font-weight:bold; font-size:30px; }
.relogio #data{ color:#999; font-weight:normal; font-size:11px;}
</style>
<script type="text/javascript" src="relogio.js"></script>
</head>
<body onload="relogio()">
<div class="relogio">
<span id="titulo">Hora local</span><br />
<span id="hora"></span><br />
<span id="data"></span>
</div>
</body>
</html>
No arquivo relogio.html, estamos realizando as seguintes ações:
• Criando um estilo CSS para deixar nosso relógio em um formato elegante;
• Estamos fazendo referência ao nosso arquivo relogio.js;
• Chamando a função relogio() no OnLoad da Body, garantindo assim, que o mesmo não seja executada antes que os elementos na tela sejam devidamente criados;
• E por fim, e não menos importante, criamos as elementos que receberão os dados para o funcionamento do relógio;
Espero que isso possa ajudar, até!
