{"id":999,"date":"2025-05-27T16:01:27","date_gmt":"2025-05-27T19:01:27","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=999"},"modified":"2025-05-28T16:37:02","modified_gmt":"2025-05-28T19:37:02","slug":"clock-json","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2025\/05\/27\/clock-json\/","title":{"rendered":"Clock JSON"},"content":{"rendered":"

Clock JSON<\/h2>\n

 <\/p>\n

\"Clock
Clock JSON<\/figcaption><\/figure>\n

 <\/p>\n

\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n

Neste tutorial, vou mostrar a cria\u00e7\u00e3o de um rel\u00f3gio(Clock) com display JSON<\/strong>, utilizando apenas CSS e JavaScript<\/strong>. com display JSON, utilizando apenas CSS e JavaScript.<\/p>\n

Voc\u00ea aprender\u00e1 a construir uma interface elegante que simula um visor de rel\u00f3gio, exibindo dados din\u00e2micos como a data, hora, temperatura e n\u00edvel de bateria, tudo formatado em JSON.<\/p>\n<\/section>\n

 <\/p>\n

\n

Criando o Clock JSON em Javascript<\/span><\/h2>\n

Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o seguinte c\u00f3digo :<\/span><\/strong><\/span><\/p>\n

\n
<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n\u00a0 \u00a0 <meta charset=\"UTF-8\">\r\n\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\u00a0 \u00a0 <title>Watch JSON Display<\/title>\r\n\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body> \u00a0 \u00a0\r\n\u00a0 \u00a0 <script src=\"script.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/div>\n<\/section>\n
 <\/p>\n
Logo ap\u00f3s crio a estrutura do Clock JSON:<\/span><\/strong><\/span><\/p>\n
\n
\r\n\u00a0 \u00a0 <div class=\"watch-container\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"watch-screen\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"header\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"dot red\"><\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"dot yellow\"><\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"dot green\"><\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"filename\">stats.json<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n<pre class=\"json-display\">\r\n<span class=\"curly-brace\">{<\/span>\r\n\u00a0 \u00a0 <span class=\"key\">\"now\"<\/span>: <span class=\"curly-brace\">{<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"key\">\"date\"<\/span>: <span class=\"string\" id=\"display-date\">\"12-05-2025\"<\/span>,\r\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"key\">\"time\"<\/span>: <span class=\"string\" id=\"display-time\">\"19:55:55\"<\/span>, \u00a0\r\n\u00a0 \u00a0 <span class=\"curly-brace\">}<\/span>,\r\n\u00a0 \u00a0 <span class=\"key\">\"temperature\"<\/span>: <span class=\"number\" id=\"display-temperature\">\"50\u00baC\"<\/span>,\r\n\u00a0 \u00a0 <span class=\"key\">\"battery\"<\/span>: <span class=\"number\" id=\"display-battery\">56<\/span>,\r\n<span class=\"curly-brace\">}<\/span>\r\n<\/pre>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 <\/div>\r\n<\/code><\/pre>\n<\/div>\n
 <\/p>\n
No c\u00f3digo acima, focamos na estrutura b\u00e1sica do rel\u00f3gio em HTML.<\/p>\n
 <\/p>\n
Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o do rel\u00f3gio e pela anima\u00e7\u00e3o:<\/span><\/strong><\/span><\/p>\n
 <\/p>\n
\n
\r\nbody {\r\n\u00a0 display: flex;\r\n\u00a0 justify-content: center;\r\n\u00a0 align-items: center;\r\n\u00a0 min-height: 100vh;\r\n\u00a0 background-color: #333;\r\n\u00a0 margin: 0;\r\n\u00a0 font-family: \"Consolas\", \"Monaco\", monospace;\r\n\u00a0 overflow: hidden;\r\n}\r\n.watch-container {\r\n\u00a0 width: 250px;\r\n\u00a0 height: 250px;\r\n\u00a0 background-color: #000;\r\n\u00a0 border-radius: 50%;\r\n\u00a0 display: flex;\r\n\u00a0 justify-content: center;\r\n\u00a0 align-items: center;\r\n\u00a0 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\r\n}\r\n.watch-screen {\r\n\u00a0 width: calc(100% - 2rem);\r\n\u00a0 height: calc(100% - 2rem);\r\n\u00a0 background-color: #1a1a1a;\r\n\u00a0 border-radius: 50%;\r\n\u00a0 display: flex;\r\n\u00a0 flex-direction: column;\r\n\u00a0 align-items: center;\r\n\u00a0 justify-content: space-evenly;\r\n\u00a0 padding: 1rem;\r\n\u00a0 box-sizing: border-box;\r\n\u00a0 font-size: 0.9em;\r\n}\r\n.header {\r\n\u00a0 display: flex;\r\n\u00a0 align-items: center;\r\n\u00a0 justify-content: center;\r\n\u00a0 gap: 0.4rem;\r\n}\r\n.header .dot {\r\n\u00a0 width: 8px;\r\n\u00a0 height: 8px;\r\n\u00a0 border-radius: 50%;\r\n}\r\n.header .red {\r\n\u00a0 background-color: #ff605c;\r\n}\r\n.header .yellow {\r\n\u00a0 background-color: #ffbd44;\r\n}\r\n.header .green {\r\n\u00a0 background-color: #00ca4e;\r\n}\r\n.header .filename {\r\n\u00a0 color: #e0e0e0;\r\n\u00a0 text-align: center;\r\n\u00a0 font-size: 0.8rem;\r\n\u00a0 font-weight: bold;\r\n}\r\n.json-display {\r\n\u00a0 white-space: pre-wrap; \/* preserva whitespace e wrap text *\/\r\n\u00a0 margin: 0;\r\n\u00a0 padding: 0;\r\n\u00a0 line-height: 1.2;\r\n\u00a0 margin-left: 0.6rem;\r\n\u00a0 color: #e0e0e0;\r\n}\r\n\/* Cores para simular o destaque de sintaxe JSON *\/\r\n.key {\r\n\u00a0 color: #e06c75;\r\n\u00a0 color: #f7b233;\r\n}\r\n.string {\r\n\u00a0 color: #98c379;\r\n}\r\n.number {\r\n\u00a0 color: #9c71c4;\r\n}\r\n.curly-brace {\r\n\u00a0 color: #abb2bf;\r\n}\r\n\/* Anima\u00e7\u00e3o dos dots *\/\r\n@keyframes bouncePulse {\r\n\u00a0 0%,\r\n\u00a0 100% {\r\n\u00a0 \u00a0 transform: translateY(0) scale(1);\r\n\u00a0 \u00a0 opacity: 1;\r\n\u00a0 }\r\n\u00a0 25% {\r\n\u00a0 \u00a0 transform: translateY(-2px) scale(1.05);\r\n\u00a0 \u00a0 opacity: 0.9;\r\n\u00a0 }\r\n\u00a0 50% {\r\n\u00a0 \u00a0 transform: translateY(0) scale(1);\r\n\u00a0 \u00a0 opacity: 1;\r\n\u00a0 }\r\n\u00a0 75% {\r\n\u00a0 \u00a0 transform: translateY(-1px) scale(1.02);\r\n\u00a0 \u00a0 opacity: 0.95;\r\n\u00a0 }\r\n}\r\n.dot {\r\n\u00a0 width: 12px;\r\n\u00a0 height: 12px;\r\n\u00a0 border-radius: 50%;\r\n\u00a0 animation: bouncePulse 2.5s infinite ease-in-out;\r\n}\r\n.red {\r\n\u00a0 background-color: #ff5f56;\r\n\u00a0 animation-delay: 0s;\r\n}\r\n.yellow {\r\n\u00a0 background-color: #ffbd2e;\r\n\u00a0 animation-delay: 0.6s;\r\n}\r\n.green {\r\n\u00a0 background-color: #27c93f;\r\n\u00a0 animation-delay: 1.2s;\r\n}\r\n<\/code><\/pre>\n<\/div>\n
 <\/p>\n
Por ultimo adiciono o script respons\u00e1vel pela l\u00f3gica do rel\u00f3gio:<\/span><\/strong><\/span><\/p>\n
\n
    \r\n\/\/ Obtem a referencia dos elementos html\r\nconst displayTime = document.getElementById(\"display-time\");\r\nconst displayDate = document.getElementById(\"display-date\");\r\nconst displayBattery = document.getElementById(\"display-battery\");\r\nconst displayTemperature = document.getElementById(\"display-temperature\");\r\n\/\/ --- Fun\u00e7\u00e3o para formatar numeros com 2 digitos ---\r\nfunction formatTwoDigits(number) {\r\n\u00a0 return number < 10 ? `0${number}` : number;\r\n}\r\n\/\/ --- Fun\u00e7\u00e3o para atualizar o Tempo ---\r\nfunction updateTime() {\r\n\u00a0 const now = new Date();\r\n\u00a0 const hours = formatTwoDigits(now.getHours());\r\n\u00a0 const minutes = formatTwoDigits(now.getMinutes());\r\n\u00a0 const seconds = formatTwoDigits(now.getSeconds());\r\n\u00a0 if (displayTime) {\r\n\u00a0 \u00a0 displayTime.textContent = `${hours}:${minutes}:${seconds}`;\r\n\u00a0 }\r\n}\r\n\/\/ --- Fun\u00e7\u00e3o para atualizar a Data ---\r\nfunction updateDate() {\r\n\u00a0 const now = new Date();\r\n\u00a0 const day = formatTwoDigits(now.getDate());\r\n\u00a0 const month = formatTwoDigits(now.getMonth() + 1);\r\n\u00a0 const year = now.getFullYear();\r\n\u00a0 if (displayDate) {\r\n\u00a0 \u00a0 displayDate.textContent = `${day}-${month}-${year}`;\r\n\u00a0 }\r\n}\r\n\/\/ --- Fun\u00e7\u00e3o para simular Bateria ---\r\nfunction updateBattery() {\r\n\u00a0 if (displayBattery) {\r\n\u00a0 \u00a0 const simulatedBattery = Math.floor(Math.random() * (99 - 40 + 1)) + 40;\r\n\u00a0 \u00a0 displayBattery.textContent = `${simulatedBattery}%`;\r\n\u00a0 }\r\n}\r\n\/\/ --- Fun\u00e7\u00e3o para simular TEmperatura ---\r\nfunction updateTemperature() {\r\n\u00a0 if (displayTemperature) {\r\n\u00a0 \u00a0 const simulatedTemperature = Math.floor(Math.random() * (35 - 20 + 1)) + 20;\r\n\u00a0 \u00a0 displayTemperature.textContent = `${simulatedTemperature}\u00baC`;\r\n\u00a0 }\r\n}\r\n\/\/ --- Fun\u00e7\u00e3o Principal ---\r\nfunction initializeWatchDisplay() {\r\n\u00a0 \/\/ Call individual update functions to set initial display\r\n\u00a0 updateTime();\r\n\u00a0 updateDate();\r\n\u00a0 updateBattery();\r\n\u00a0 updateTemperature();\r\n\u00a0 \/\/ configura intervalos\r\n\u00a0 setInterval(updateTime, 1000); \/\/ atualiza a cada segundo\r\n\u00a0 setInterval(updateDate, 60000); \/\/ atualiza a cada minuto\r\n\u00a0 setInterval(updateBattery, 5000); \/\/ atualiza a Bateria a cada 5 segundos\r\n\u00a0 setInterval(updateTemperature, 7000); \/\/ atualiza a temperature a cada 7 segundos\r\n}\r\n\/\/ --- Inicializa ---\r\ndocument.addEventListener(\"DOMContentLoaded\", initializeWatchDisplay);\r\n<\/code><\/pre>\n<\/div>\n
Uma breve explica\u00e7\u00e3o do c\u00f3digo Javascript<\/a> criado:\u00a0\u00a0<\/span><\/p>\n
    \n
  1. \n