Clock JSON
Clock JSON
Introdução
Neste tutorial, vou mostrar a criação de um relógio(Clock) com display JSON, utilizando apenas CSS e JavaScript. com display JSON, utilizando apenas CSS e JavaScript.
Você aprenderá a construir uma interface elegante que simula um visor de relógio, exibindo dados dinâmicos como a data, hora, temperatura e nível de bateria, tudo formatado em JSON.
Criando o Clock JSON em Javascript
Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo o seguinte código :
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Watch JSON Display</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="script.js"></script> </body> </html>
Logo após crio a estrutura do Clock JSON:
<div class="watch-container">
<div class="watch-screen">
<div class="header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
<span class="filename">stats.json</span>
</div>
<pre class="json-display">
<span class="curly-brace">{</span>
<span class="key">"now"</span>: <span class="curly-brace">{</span>
<span class="key">"date"</span>: <span class="string" id="display-date">"12-05-2025"</span>,
<span class="key">"time"</span>: <span class="string" id="display-time">"19:55:55"</span>,
<span class="curly-brace">}</span>,
<span class="key">"temperature"</span>: <span class="number" id="display-temperature">"50ºC"</span>,
<span class="key">"battery"</span>: <span class="number" id="display-battery">56</span>,
<span class="curly-brace">}</span>
</pre>
</div>
</div>
No código acima, focamos na estrutura básica do relógio em HTML.
Depois adiciono o css responsável pela estilização do relógio e pela animação:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
margin: 0;
font-family: "Consolas", "Monaco", monospace;
overflow: hidden;
}
.watch-container {
width: 250px;
height: 250px;
background-color: #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.watch-screen {
width: calc(100% - 2rem);
height: calc(100% - 2rem);
background-color: #1a1a1a;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
padding: 1rem;
box-sizing: border-box;
font-size: 0.9em;
}
.header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.header .dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.header .red {
background-color: #ff605c;
}
.header .yellow {
background-color: #ffbd44;
}
.header .green {
background-color: #00ca4e;
}
.header .filename {
color: #e0e0e0;
text-align: center;
font-size: 0.8rem;
font-weight: bold;
}
.json-display {
white-space: pre-wrap; /* preserva whitespace e wrap text */
margin: 0;
padding: 0;
line-height: 1.2;
margin-left: 0.6rem;
color: #e0e0e0;
}
/* Cores para simular o destaque de sintaxe JSON */
.key {
color: #e06c75;
color: #f7b233;
}
.string {
color: #98c379;
}
.number {
color: #9c71c4;
}
.curly-brace {
color: #abb2bf;
}
/* Animação dos dots */
@keyframes bouncePulse {
0%,
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
25% {
transform: translateY(-2px) scale(1.05);
opacity: 0.9;
}
50% {
transform: translateY(0) scale(1);
opacity: 1;
}
75% {
transform: translateY(-1px) scale(1.02);
opacity: 0.95;
}
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
animation: bouncePulse 2.5s infinite ease-in-out;
}
.red {
background-color: #ff5f56;
animation-delay: 0s;
}
.yellow {
background-color: #ffbd2e;
animation-delay: 0.6s;
}
.green {
background-color: #27c93f;
animation-delay: 1.2s;
}
Por ultimo adiciono o script responsável pela lógica do relógio:
// Obtem a referencia dos elementos html
const displayTime = document.getElementById("display-time");
const displayDate = document.getElementById("display-date");
const displayBattery = document.getElementById("display-battery");
const displayTemperature = document.getElementById("display-temperature");
// --- Função para formatar numeros com 2 digitos ---
function formatTwoDigits(number) {
return number < 10 ? `0${number}` : number;
}
// --- Função para atualizar o Tempo ---
function updateTime() {
const now = new Date();
const hours = formatTwoDigits(now.getHours());
const minutes = formatTwoDigits(now.getMinutes());
const seconds = formatTwoDigits(now.getSeconds());
if (displayTime) {
displayTime.textContent = `${hours}:${minutes}:${seconds}`;
}
}
// --- Função para atualizar a Data ---
function updateDate() {
const now = new Date();
const day = formatTwoDigits(now.getDate());
const month = formatTwoDigits(now.getMonth() + 1);
const year = now.getFullYear();
if (displayDate) {
displayDate.textContent = `${day}-${month}-${year}`;
}
}
// --- Função para simular Bateria ---
function updateBattery() {
if (displayBattery) {
const simulatedBattery = Math.floor(Math.random() * (99 - 40 + 1)) + 40;
displayBattery.textContent = `${simulatedBattery}%`;
}
}
// --- Função para simular TEmperatura ---
function updateTemperature() {
if (displayTemperature) {
const simulatedTemperature = Math.floor(Math.random() * (35 - 20 + 1)) + 20;
displayTemperature.textContent = `${simulatedTemperature}ºC`;
}
}
// --- Função Principal ---
function initializeWatchDisplay() {
// Call individual update functions to set initial display
updateTime();
updateDate();
updateBattery();
updateTemperature();
// configura intervalos
setInterval(updateTime, 1000); // atualiza a cada segundo
setInterval(updateDate, 60000); // atualiza a cada minuto
setInterval(updateBattery, 5000); // atualiza a Bateria a cada 5 segundos
setInterval(updateTemperature, 7000); // atualiza a temperature a cada 7 segundos
}
// --- Inicializa ---
document.addEventListener("DOMContentLoaded", initializeWatchDisplay);
Uma breve explicação do código Javascript criado:
-
- Captura de Elementos HTML: No início, o script “pega” as referências de todos os elementos HTML (como
display-time,display-date, etc.) onde as informações serão mostradas. - Formatação de Dois Dígitos: A função
formatTwoDigitsgarante que números menores que 10 (como 5 horas ou 7 minutos) sejam exibidos com um zero à esquerda (ex: “05”, “07”), mantendo um formato padrão. - Atualização de Tempo e Data:
updateTime: Obtém a hora, minuto e segundo atuais e os exibe no formatoHH:MM:SS.updateDate: Pega o dia, mês e ano e os mostra comoDD-MM-AAAA.
- Simulação de Dados:
updateBattery: Gera um valor de bateria aleatório entre 40% e 99% para simular o nível da bateria.updateTemperature: Simula uma temperatura aleatória entre 20ºC e 35ºC.
- Função Principal (
initializeWatchDisplay):- Chama as funções de atualização uma vez para exibir os valores iniciais assim que a página carrega.
- Usada para definir os intervalos de atualização de cada informação;
- Inicialização Segura: O evento
DOMContentLoadedgarante que o script só comece a rodar depois que todo o HTML da página for carregado, evitando erros.
- Captura de Elementos HTML: No início, o script “pega” as referências de todos os elementos HTML (como
Você pode visualizar a animação no link abaixo:
Deixo aqui um vídeo curto do processo de criação da animação:
Conclusão
Este projeto não só adiciona um elemento divertido ao seu site, mas também é uma excelente maneira de melhorar suas habilidades em HTML, CSS e JavaScript. Experimente adicionar outros efeitos ou personalizações para tornar a animação ainda mais envolvente.
Código fonte do tutorial da animação em Javascript:
