Como Criar um Código auto-relógio em JavaScript

🗞️ O verdadeiro programador artista!


Como Criar um Código auto-relógio em JavaScript


Uma vez eu encontrei um site que exibia o relógio com o próprio código JavaScript, acabei salvando o código, pois queria entendê-lo sem o formato de relógio e acabei perdendo o link com o código original, salvei e formatei e o código era esse:

(r = () => setInterval(t => {
    for (j = o = "\n", y = 5; y--; document.body["inn" +
            "erHTML"] = "<pre>&lt" + (S = "script>\n") + o + "\n\n&lt/" + S)
        for (x = -01; 63 - !y > x++; o += `(r=${r})()` [j++].fontcolor(c ? "#FF0" : "#444")) c = x / 2 %
            4 < 3 && parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i = "9" < (
                D = Date()[16 + (x / 8 | 0)]) ? 30 : D * 3, i + 3), 36) & 1 << (x / 2 | 0) % 4 + 3 * y
}, 100))()


Note que ele exibe e modifica o próprio código.

Como eu havia limpado o histórico, acabei não encontrando mais o código, mas o formato original era esse:

(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
+"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?"#FF0":"#444"))c=x/2
%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()

Ou seja, se você criar esse arquivo e abrir no seu navegador, você verá o relógio que utiliza o próprio código JS para exibí-lo:

clockjs.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <style>
      html {background: #000;}
    </style>
  </head>
  <body>
    <a href="https://aem1k.com/qlock/">Saiba mais</a><br><<hr>
    
 <script>

(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
+"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?"#FF0":"#444"))c=x/2
%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()

</script> 
  </body>
</html>

Se quiser tamanho e estilos diferentes, use o CSS para formatar a tag <pre>, exemplo:

pre {font-weight: bold; font-size: 30px;}

Legal, né?! Se souber o link, manda pra mim pra dar os créditos para a pessoa! Fui!


javascript


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!