Olá pessoal, hoje criei um programa que simular um relógio, feito com JavaScript, agora sempre que quiser saber a hora é só visita à página 😁.
Visualize o Pen Relógio online feito por Francisco Chaves (@franciscochaves) em CodePen.
Deixo o código fonte abaixo para quem quiser utilizá-lo, fiquem a vontade para compartilhar.
Código HTML:
<!-- HTML -->
<main>
<section class="ceu" id="ceu">
<div class="astro" id="astro"></div>
</section>
</main>
Código CSS:
/* CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ceu {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto, Arial, sans-serif;
}
.astro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 250px;
max-height: 250px;
width: 100%;
height: 100%;
border-radius: 50%;
}
.noite {
background-color: #263238;
}
.dia {
background-color: #81d4fa;
}
.sol,
.lua {
box-shadow: 0 0 40px #ffd;
}
.sol {
background-color: #ffef00;
}
.lua {
background-color: #f5f5f5;
}
Código JS:
// JS
const ceu = document.getElementById('ceu');
const astro = document.getElementById('astro');
setInterval(function () {
showTime(ceu, astro, new Date());
}, 1000);
function showTime(ceu, astro, data) {
function messagem() {
const hora = data.getHours();
if (hora >= 6 && hora < 12) {
dia();
return 'Bom dia';
} else if (hora >= 12 && hora < 18) {
dia();
return 'Boa Tarde';
} else {
noite();
return 'Boa Noite';
}
}
function dia() {
ceu.classList.remove('noite');
ceu.classList.add('dia');
astro.classList.remove('lua');
astro.classList.add('sol');
}
function noite() {
ceu.classList.remove('dia');
ceu.classList.add('noite');
astro.classList.remove('sol');
astro.classList.add('lua');
}
astro.innerHTML =
'<h1>' +
data.toLocaleTimeString() +
'</h1>' +
'<h2>' +
messagem() +
'</h2>';
}
