¿Prefieres el diseño clásico de números romanos o el estilo moderno de líneas minimalistas?
Asegúrate de configurar tu dispositivo para que la pantalla no se apague automáticamente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Analog Clock | Full Screen Experience</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* Avoid accidental text selection on double-click/tap */ reloj analógico online pantalla completa
// angles in radians (0 degree = 12 o'clock, so we subtract 90deg offset) const secondAngle = (secondsExact * 6) * Math.PI / 180; // 360/60 = 6 deg per sec const minuteAngle = (minutesExact * 6) * Math.PI / 180; const hourAngle = (hoursExact * 30) * Math.PI / 180; // 360/12 = 30 deg per hour
Elimina el desorden visual de las pestañas del navegador y la barra de tareas. Cómo poner tu reloj en pantalla completa ¿Prefieres el diseño clásico de números romanos o
);
// update derived dimensions based on logical canvas (always 800x800) function updateGeometry() // canvas resolution fixed 800x800 for crisp lines canvas.width = 800; canvas.height = 800; size = 800; centerX = 400; centerY = 400; radius = 370; // leave margin for decorations Cómo poner tu reloj en pantalla completa );
<div class="info-bar"> 🕰️ RELOJ ANALÓGICO | <span class="digital-time" id="liveDigitalClock">--:--:--</span> ⏻ </div>
// Listen for fullscreen change events to redraw if needed (resize artifacts) document.addEventListener('fullscreenchange', () => setTimeout(() => handleCanvasScale(); drawClock(); updateDigitalDisplay(); , 50); ); document.addEventListener('webkitfullscreenchange', () => setTimeout(() => handleCanvasScale(); drawClock(); updateDigitalDisplay(); , 50); ); document.addEventListener('mozfullscreenchange', () => setTimeout(() => handleCanvasScale(); drawClock(); updateDigitalDisplay(); , 50); );