Como adicionar relógio a uma página web com JS de forma simples
- #HTML
- #JavaScript
- #CSS
Neste breve artigo explico como adicionar um relógio em uma página web.
1º Crie uma <div> e nela adicione um ID e Classe CSS:
<div id="rel" class="relogio"></div>
2º Em <script>, crie a função relógio.
Nela, instancie a Função Date(), para utilizar os métodos getHours(), getMinutes() e getSeconds:
<script>
function relogio(){
let data = new Date()
let hour = data.getHours()
let min = data.getMinutes()
let sec = data.getSeconds()
if (hour < 10){
hour = "0"+hour
}
if(min < 10){
min = "0"+min
}
if(sec < 10){
sec = "0"+sec
}
let horas = hour + ":" + min + ":" + sec
let div = document.getElementById('rel')
div.innerHTML = "<p>"+horas+"</p>"
}
let timer = setInterval(relogio, 1000)
</script>
3º Utilize dentro da função as estruturas IF para adicionar o "0" quando o número for menor que 10:
if (hour < 10){
hour = "0"+hour
}
if(min < 10){
min = "0"+min
}
if(sec < 10){
sec = "0"+sec
}
4º formate a saída das horas:
let horas = hour + ":" + min + ":" + sec
5º Fechando a função, crie uma variável que atribui a tag div pelo id dela...
let div = document.getElementById('rel')
...e utilize o innerHtml para inserir uma tag de parágrafo em que dentro dela fica a variável hora:
div.innerHTML = "<p>"+horas+"</p>"
6º Fora da função, crie a variável timer que, dentro dela, use a função setInterval. Nos seus parâmetros, passe a função relógio e digite 1000 (1 segundo em milissegundos).
7º Por fim, formate da forma que preferir.
*{
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.relogio{
height: 120px;
background-color: rgb(64, 64, 165);
color: aliceblue;
}
p{
font-size: 50px;
text-align: center;
padding: 20px 0px 20px 0px;
}
Segue abaixo o link do GitHub:
