Relógio Digital com efeito utilizando WordPress e Elementor Pro

Digital clock
00 : 00 : 00

Código HTML

				
					<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <title>Digital clock</title>
  </head>
  <body>
    <div class="hero">
      <div class="box">
        <style></style>
        <div class="clock">
          <span id="hrs">00</span>
          <span>:</span>
          <span id="min">00</span>
          <span>:</span>
          <span id="sec">00</span>
        </div>
      </div>
    </div>
    <script>
        let hrs = document.getElementById("hrs");
        let min = document.getElementById("min");
        let sec = document.getElementById("sec");
        setInterval(() => {
        let currentTime = new Date();
         hrs.innerHTML =
        (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours();
        min.innerHTML =
        (currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes();
        sec.innerHTML =
        (currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds();
        }, 1000);
    </script>
  </body>
</html>
				
			

Vou explicar de forma super simples como o código atualizado funciona. Ele cria um relógio digital que mostra a hora atual e se atualiza a cada segundo.Estrutura do código

  1. <!DOCTYPE html>
    • Define que o documento é uma página HTML5.
  2. <html lang=”pt”>
    • Inicia o documento HTML e define o idioma como português.
  3. <head>
    • Contém informações sobre a página, como o título.
  4. <meta charset=”UTF-8″ />
    • Define a codificação de caracteres como UTF-8.
  5. <title>Digital clock</title>
    • Define o título da página que aparece na aba do navegador.Corpo da página
  1. <body>
    • Contém o conteúdo visível da página.
  2. <div class=”hero”>
    • Uma seção da página com a classe “hero” (geralmente usada para a parte principal).
  3. <div class=”box”>
    • Uma caixa dentro da seção “hero”.
  4. <div class=”clock”>
    • A área onde o relógio é exibido.
  5. <span id=”hrs”>00</span><span>:</span><span id=”min”>00</span><span>:</span><span id=”sec”>00</span>
    • Mostra horas, minutos e segundos inicialmente como 00:00:00.Script JavaScript
  1. <script>
    • Inicia o bloco de código JavaScript.
  2. let hrs = document.getElementById(“hrs”);
    • Seleciona o elemento de horas.
  3. let min = document.getElementById(“min”);
    • Seleciona o elemento de minutos.
  4. let sec = document.getElementById(“sec”);
    • Seleciona o elemento de segundos.
  5. setInterval(() => { … }, 1000);
    • Cria uma função que é executada a cada 1000 milissegundos (1 segundo).
  6. let currentTime = new Date();
    • Obtém a hora atual.
  7. hrs.innerHTML = (currentTime.getHours() < 10 ? “0” : “”) + currentTime.getHours();
    • Atualiza as horas, adicionando um zero à esquerda se for menor que 10.
  8. min.innerHTML = (currentTime.getMinutes() < 10 ? “0” : “”) + currentTime.getMinutes();
    • Atualiza os minutos, adicionando um zero à esquerda se for menor que 10.
  9. sec.innerHTML = (currentTime.getSeconds() < 10 ? “0” : “”) + currentTime.getSeconds();
    • Atualiza os segundos, adicionando um zero à esquerda se for menor que 10.

Resumindo, esse código HTML e JavaScript cria um relógio digital simples que exibe a hora atualizada a cada segundo, formatando os números para sempre mostrar dois dígitos (por exemplo, 08:05:09).

Código CSS

				
					* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
.hero {
  width: 100%;
 
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f363e;
  position: relative;
}
.box {
  position: relative;
  width: 300px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clock {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(40px);
  color: #6e7f92f6;
  z-index: 10;
}
.clock span {
  font-size: 45px;
  width: 50px;
  display: inline-block;
  text-align: center;
  position: relative;
}
.clock span::after {
  font-size: 16px;
  position: absolute;
  bottom: -10px;
  left: 60%;
  transform: translateX(-50%);
}
#hrs::after {
  content: "HOURES";
  color: #0f0;
  font-weight: 600;
  margin-bottom: -10px;
}
#min::after {
  content: "MINS";
  color: #0ff;
  font-weight: 600;
  margin-bottom: -10px;
}
#sec::after {
  content: "SEC";
  color: #ff0;
  font-weight: 600;
  margin-bottom: -10px;
}

/*------Anemated Border---------*/
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #0f0,
    #ff0,
    #0ff,
    #f0f,
    #0ff
  );
  border-radius: 20px;
  animation: rotate 6s linear infinite;
}
.box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #0f0,
    #ff0,
    #0ff,
    #f0f,
    #0ff
  );
  border-radius: 20px;
  animation: rotate 4s linear infinite;
  filter: blur(40px);
  opacity: 0.75;
}
.box style {
  position: absolute;
  inset: 4px;
  background: #2f363e;
  border-radius: 16px;
  color: #ff0;
  font-size: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes rotate {
  0% {
    --a: 0;
  }
  0% {
    --a: -360deg;
  }
}

				
			

Vou explicar de forma simples como funciona o código CSS que estiliza o relógio digital.

Reset e Fonte

  1. *
    • Remove margem e padding de todos os elementos.
    • Define a fonte “Poppins” para todos os elementos.
    • Ajusta o box-sizing para border-box, que inclui bordas e padding nas dimensões dos elementos.

Estilo para .hero

  1. .hero
    • Ocupa toda a largura da tela (width: 100%).
    • Usa flexbox para centralizar seu conteúdo vertical e horizontalmente (display: flex, align-items: center, justify-content: center).
    • Define um fundo cinza escuro (background: #2f363e).
    • Define a posição como relativa (position: relative).

Estilo para .box

  1. .box
    • Define a posição como relativa (position: relative).
    • Define as dimensões (width: 300px, height: 150px).
    • Usa flexbox para centralizar seu conteúdo (display: flex, align-items: center, justify-content: center).

Estilo para .clock

  1. .clock
    • Define bordas arredondadas (border-radius: 10px).
    • Usa flexbox para centralizar seu conteúdo (display: flex, align-items: center, justify-content: center).
    • Aplica um filtro de desfoque ao fundo (backdrop-filter: blur(40px)).
    • Define a cor do texto (color: #6e7f92f6).
    • Define a posição na frente de outros elementos (z-index: 10).

Estilo para .clock span

  1. .clock span
    • Define o tamanho da fonte (font-size: 45px).
    • Define a largura (width: 50px).
    • Usa inline-block para comportar margens e padding (display: inline-block).
    • Centraliza o texto (text-align: center).
    • Define a posição como relativa (position: relative).

Estilo para .clock span::after

  1. .clock span::after
    • Define o tamanho da fonte para o texto adicional (font-size: 16px).
    • Posiciona o texto abaixo do span (position: absolute, bottom: -10px).
    • Centraliza o texto horizontalmente (left: 60%, transform: translateX(-50%)).

Estilo para os spans de horas, minutos e segundos

  1. #hrs::after

    • Adiciona o texto “HOURES” abaixo das horas (content: "HOURES").
    • Define a cor verde (color: #0f0).
    • Define a fonte como negrito (font-weight: 600).
  2. #min::after

    • Adiciona o texto “MINS” abaixo dos minutos (content: "MINS").
    • Define a cor ciano (color: #0ff).
    • Define a fonte como negrito (font-weight: 600).
  3. #sec::after

    • Adiciona o texto “SEC” abaixo dos segundos (content: "SEC").
    • Define a cor amarela (color: #ff0).
    • Define a fonte como negrito (font-weight: 600).

Animação da borda da .box

  1. .box::before e .box::after
    • Cria elementos pseudo para a animação da borda.
    • Define a posição como absoluta e ocupa toda a área da .box (position: absolute, inset: 0).
    • Aplica um gradiente cônico que se repete em cores vibrantes (background: repeating-conic-gradient(...)).
    • Define bordas arredondadas (border-radius: 20px).
    • Aplica a animação de rotação (animation: rotate 6s linear infinite para before e rotate 4s linear infinite para after).
    • Adiciona desfoque e opacidade ao elemento after (filter: blur(40px), opacity: 0.75).

Estilo interno da .box

  1. .box style
    • Cria uma camada interna com posição absoluta (position: absolute, inset: 4px).
    • Define o fundo como cinza escuro (background: #2f363e).
    • Aplica bordas arredondadas (border-radius: 16px).
    • Define a cor do texto como amarelo (color: #ff0).
    • Define o tamanho da fonte (font-size: 20px).
    • Usa flexbox para centralizar o conteúdo (display: flex, align-items: center, justify-content: center).
    • Define a posição atrás dos elementos principais (z-index: 1).

Propriedade personalizada e animação

  1. @property –a

    • Define uma propriedade CSS customizada chamada --a.
    • Define a sintaxe como um ângulo (syntax: "<angle>").
    • Indica que não herda valores (inherits: false).
    • Define o valor inicial como 0deg (initial-value: 0deg).
  2. @keyframes rotate

    • Cria a animação rotate que altera o valor da propriedade --a de 0 a -360 graus (0% { --a: 0; } 100% { --a: -360deg; }).

Resumindo, o CSS estiliza o relógio digital, centralizando-o na tela, aplicando fontes, cores, e criando uma borda animada ao redor da caixa do relógio. Além disso, adiciona textos explicativos abaixo das horas, minutos e segundos, e usa animações para dar um efeito dinâmico ao fundo da caixa.

Quer receber nossas ofertas?

Inscreva-se em nosso boletim informativo para obter informações atualizadas, notícias, insights ou promoções. 

Artigos Relacionados

Precisa de Ajuda?
Escanear o código
Atendimento RaphaelBarretoPro
Olá 👋
Podemos ajudá-lo?