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 type="litespeed/javascript">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> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://raphaelbarretopro.com.br/wp-content/litespeed/js/bb9f6e9d1c2bb383e3c57c491d755c20.js?ver=f2a3e"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</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