Relógio interativo e personalizado #HTML #CCS #Javascript

Enviado por mrab em 29. Janeiro 2024 - 4:07

Bem-vindos ao programar WEB, onde a fascinante interseção entre código e design se desdobra diante de seus olhos! Hoje, vamos mergulhar profundamente na criação de um relógio digital interativo, revelando os intrincados detalhes por trás das linhas de código que o tornam único. Prepare-se para uma jornada de descobertas na qual exploraremos o JavaScript e o CSS para dar vida a um relógio digital com estilos incríveis.

Vamos desvendar como o JavaScript controla os ponteiros dos segundos, minutos e horas em tempo real. Cada linha de código é uma peça crucial na engrenagem que mantém nosso relógio funcionando perfeitamente.
Estilizando com Maestria:

Descubra os segredos do CSS que conferem estilo ao nosso relógio. Desde a forma e fundo até a posição dos números, cada detalhe é cuidadosamente planejado para criar uma experiência visual única.

Explore como é possível ativar o som dos segundos, proporcionando uma experiência auditiva envolvente. A cada segundo, o relógio emite um som sutil, adicionando um toque sensorial à sua interação.
Design Personalizado:

Experimente a versatilidade do relógio alterando entre designs redondos e quadrados. Personalize ainda mais a aparência ajustando o fundo para se adequar ao seu estilo.

Baixar os códigos

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relógio</title>
    <style>
        *,
        ::before,
        ::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

html {
            font-size: 1vw; /* Usando unidade relativa para font-size */
            color:#fff;
        }

body {            
            background:#000;
            font-family: times;
        }

.container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.relogio {
            width: 80vmin; /* Usando unidade relativa para largura */
            height: 80vmin; /* Usando unidade relativa para altura */
            background-color: #fff;
            background: url("fundo_relogio.jpg");             
            background-size: cover; border: 1vmin solid #af2929; /* Usando unidade relativa para borda */
            box-shadow: 1vmin 1vmin 2vmin #381414, -1vmin -1vmin 2vmin #381414; /* Usando unidade relativa para sombra */
            position: relative;
        }

.relogio-redondo {
    background: url("fundo_relogio2.jpg");
    border-radius: 50%;
    background-size: cover; 
    }

.relogio-quadrado {
        background: url("fundo_relogio.jpg");
        border-radius: 0;
        background-size: cover; 
    }

.relogio-branco {
            background-color: #fff;
            background-image: none; /* Remove a imagem de fundo se estiver presente */
        }

.sem-numeros .numeros {
            display: none;
        }

.numeros {
            width: inherit;
            height: inherit;
            position: relative;
            color: transparent;
            text-shadow: none;
        }

.numeros div {
            position: absolute;
            font-size: 4vmin;
            font-weight: bold;          
            
        }

.com-numeros {
            color: #922121;
            text-shadow: 0vmin 1px 1vmin #fb9696;
        }

.ponteiros {
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.ponteiros::before {
            content: "";
            width: 3vmin; /* Usando unidade relativa para largura */
            height: 3vmin; /* Usando unidade relativa para altura */
            background-color: #be4a4b;
            border-radius: 50%;
            box-shadow: 0.3vmin 0.3vmin 0.5vmin #777; /* Usando unidade relativa para sombra */
            z-index: 10;
        }

.ponteiros div {
            width: 1vmin; /* Usando unidade relativa para largura */
            height: 32vmin; /* Usando unidade relativa para altura */                       
            position: absolute;
            bottom: 50%;        
            border-radius: 100% 100% 0 0;
            transform-origin: bottom center;
        }

.ponteiros .hora {
            height: 20vmin;
            transform: rotate(90deg);
            background-image: url('horas.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position-x: center;
            
            background-repeat: no-repeat;
            width: 100%;
        }

.ponteiros .minuto {    
            background-image: url('minutos.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position-x: center;
            
            background-repeat: no-repeat;
            width: 100%;
        }

.ponteiros .segundo {    
            background-image: url('segundos.png');
            background-size: contain;
            background-position-x: center;
            
            background-repeat: no-repeat;
            width: 80%;

} 
    </style>
</head>
<body>
    <main class="container">
        <div class="relogio relogio-redondo" id="relogio">
            <div class="numeros" id="numeros">
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>1</div>
                <div>2</div>
            </div>
            <div class="ponteiros">
                <div class="hora"></div>
                <div class="minuto"></div>
                <div class="segundo"></div>
                <audio id="audio">
                <source src="segundos.mp3" type="audio/mpeg">
               Your browser does not support the audio element.
                 </audio>
            </div>
            <center>
                <label class="switch" for="toggleAudio">
  <input type="checkbox" id="toggleAudio">
  <span class="slider round"></span>
</label> Ligar o audio | 
<button onclick="toggleRelogioBackground()">Fundo</button> | 
<button onclick="toggleRelogioShape()">Alterar Forma</button>   
</center>     
    </main>
        </div>      
    </main> 
    <script>
        const hora = document.querySelector(".hora");
        const minuto = document.querySelector(".minuto");
        const segundo = document.querySelector(".segundo");
        const audio = document.getElementById("audio");

function setDate() {
            const now = new Date();

const getSecond = now.getSeconds();
            const getMinute = now.getMinutes();
            const getHour = now.getHours();

// move os ponteiros dos segundos 
            const secondDegree = (getSecond / 60) * 360;
            segundo.style.transform = `rotate(${secondDegree}deg)`;

// move the minute arrow
            const minuteDegree = (getMinute / 60) * 360;
            minuto.style.transform = `rotate(${minuteDegree}deg)`;

// move the hour arrow
            const hourDegree = (getHour / 12) * 360;
            hora.style.transform = `rotate(${hourDegree}deg)`;

// Reproduz o áudio a cada mudança de segundo
       
            audioElement.play()
        
        }

setInterval(setDate, 1000);

var audioElement = document.getElementById('audio');
var toggleAudioCheckbox = document.getElementById('toggleAudio');
toggleAudioCheckbox.addEventListener('change', function() {
    // Se o checkbox estiver marcado, reproduza o áudio
    if (toggleAudioCheckbox.checked) {
        audioElement.play().catch(function(error) {
            console.error('Erro ao reproduzir áudio:', error);
        });
    } else {
        // Se o checkbox estiver desmarcado, pause o áudio
        audioElement.pause();

}
});

function toggleRelogioShape() {
            const relogio = document.getElementById("relogio");
            const isRedondo = relogio.classList.contains("relogio-redondo");

if (isRedondo) {
                relogio.classList.remove("relogio-redondo");
                relogio.classList.add("relogio-quadrado");
                
            } else {
                relogio.classList.remove("relogio-quadrado");
                relogio.classList.add("relogio-redondo");
               
            }
        }
    
    function toggleRelogioBackground() {
            const relogio = document.getElementById("relogio");
            relogio.classList.toggle("relogio-branco");
            const numeros = document.getElementById("numeros");
            numeros.classList.toggle("com-numeros");

}

function posicionarNumeros() {
            const numeros = document.querySelectorAll('.numeros div');
            const raio = 35; // raio do círculo onde os números serão posicionados
            const centroX = 39; // coordenada X do centro do círculo
            const centroY = 39; // coordenada Y do centro do círculo

numeros.forEach((numero, index) => {
                const angulo = (index * (360 / 12)) * (Math.PI / 180);
                const posX = centroX + raio * Math.cos(angulo);
                const posY = centroY + raio * Math.sin(angulo);

numero.style.top = posY + 'vmin';
                numero.style.left = posX + 'vmin';
                numero.style.transform = 'translate(-50%, -50%)';
            });
        }

// Chama a função para posicionar os números após o carregamento do DOM
        document.addEventListener('DOMContentLoaded', posicionarNumeros);
         document.getElementById("relogio").classList.add("relogio-redondo");
    </script>
</body>
</html>

Seção:

Java-script