Relógio Digital com efeito utilizando WordPress e Elementor Pro
Digital clock 00 : 00 : 00 Código HTML Digital clock 00 : 00 : 00 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> Uma seção da página com a classe “hero” (geralmente usada para a parte principal). <div> Uma caixa dentro da seção “hero”. <div> 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: “”; 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
