Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2020

Modo escuro

Relógio online em JavaScript

Relógio online em JavaScript

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>';
}
×

Inscreva-se para novas atualizações