tle>Simple Clock

Clock

24-hour

00:00:00

Loading date...

1d:T4a6,import { createDigital } from './digital.js'; import { createAnalog } from './analog.js'; const digitalContainer = document.getElementById('digital'); const analogContainer = document.getElementById('analog'); const toggle = document.getElementById('formatToggle'); const digital = createDigital(digitalContainer); const analog = createAnalog(analogContainer); // initialize toggle from storage toggle.checked = digital.getFormat(); toggle.addEventListener('change', () => { digital.setFormat(toggle.checked); // immediate update so displayed format changes instantly digital.update(new Date()); }); let rafId = null; function tick() { const now = new Date(); digital.update(now); analog.update(now); rafId = requestAnimationFrame(tick); } // Start ticking (use RAF for smooth second hand) tick(); // Optional: stop when page hidden to save CPU document.addEventListener('visibilitychange', () => { if (document.hidden) { if (rafId != null) cancelAnimationFrame(rafId); rafId = null; } else { if (rafId == null) tick(); } }); 1e:Tfcb,export function createAnalog(container) { const NS = "http://www.w3.org/2000/svg"; const size = 240; const viewBox = `0 0 ${size} ${size}`; const center = size / 2; const radius = center - 12; const svg = document.createElementNS(NS, 'svg'); svg.setAttribute('viewBox', viewBox); svg.classList.add('clock-face'); // face const face = document.createElementNS(NS, 'circle'); face.setAttribute('cx', center); face.setAttribute('cy', center); face.setAttribute('r', radius); face.setAttribute('fill', 'transparent'); face.setAttribute('stroke', 'rgba(255,255,255,0.04)'); face.setAttribute('stroke-width', '1'); svg.appendChild(face); // ticks for (let i = 0; i < 60; i++) { const tick = document.createElementNS(NS, 'line'); const angle = (i / 60) * Math.PI * 2; const outerR = radius - 6; const innerR = i % 5 === 0 ? outerR - 10 : outerR - 6; const x1 = center + outerR * Math.cos(angle); const y1 = center + outerR * Math.sin(angle); const x2 = center + innerR * Math.cos(angle); const y2 = center + innerR * Math.sin(angle); tick.setAttribute('x1', x1); tick.setAttribute('y1', y1); tick.setAttribute('x2', x2); tick.setAttribute('y2', y2); tick.setAttribute('stroke', i % 5 === 0 ? 'rgba(230,238,246,0.12)' : 'rgba(230,238,246,0.06)'); tick.setAttribute('stroke-width', i % 5 === 0 ? '2' : '1'); svg.appendChild(tick); } // hands group const g = document.createElementNS(NS, 'g'); g.setAttribute('transform', `translate(${center}, ${center})`); svg.appendChild(g); // hour const hourHand = document.createElementNS(NS, 'line