Relógio Digital com efeito utilizando WordPress e Elementor Pro

Raphael Barreto
25 de junho de 2024

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

<!DOCTYPE html>
- Define que o documento é uma página HTML5.
<html lang=”pt”>
- Inicia o documento HTML e define o idioma como português.
<head>
- Contém informações sobre a página, como o título.
<meta charset=”UTF-8″ />
- Define a codificação de caracteres como UTF-8.
<title>Digital clock</title>
- Define o título da página que aparece na aba do navegador.Corpo da página

<body>
- Contém o conteúdo visível da página.
<div class=”hero”>
- Uma seção da página com a classe “hero” (geralmente usada para a parte principal).
<div class=”box”>
- Uma caixa dentro da seção “hero”.
<div class=”clock”>
- A área onde o relógio é exibido.
<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

<script>
- Inicia o bloco de código JavaScript.
let hrs = document.getElementById(“hrs”);
- Seleciona o elemento de horas.
let min = document.getElementById(“min”);
- Seleciona o elemento de minutos.
let sec = document.getElementById(“sec”);
- Seleciona o elemento de segundos.
setInterval(() => { … }, 1000);
- Cria uma função que é executada a cada 1000 milissegundos (1 segundo).
let currentTime = new Date();
- Obtém a hora atual.
hrs.innerHTML = (currentTime.getHours() < 10 ? “0” : “”) + currentTime.getHours();
- Atualiza as horas, adicionando um zero à esquerda se for menor que 10.
min.innerHTML = (currentTime.getMinutes() < 10 ? “0” : “”) + currentTime.getMinutes();
- Atualiza os minutos, adicionando um zero à esquerda se for menor que 10.
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

*
- 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

.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

.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

.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

.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

.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

#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).
#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).
#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

.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

.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

@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).
@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.

Seja um afiliado

Seja um afiliado dos nossos produtos e receba comissões de até 50%

Saiba Mais

Novidade