Generador de widget de reloj
Crea un reloj analógico o digital en vivo para tu web, blog, página de Notion o superposición de streaming. Elige la zona horaria, la esfera, los colores y el formato de 12 o 24 horas, mira cómo avanza la vista previa y copia un pequeño fragmento HTML autónomo, un iframe o un enlace.
Última actualización:
Vista previa en vivo
Cómo usar Generador de widget de reloj
- Elige el tipo de reloj: analógico, digital o ambos juntos.
- Elige la zona horaria: una ciudad concreta como Nueva York o Tokio, u Hora del visitante para mostrar a cada lector su propia hora local. Añade una etiqueta opcional como "Oficina de Londres".
- Configura la visualización: estilo de esfera, estilo digital, tamaño, fuente, formato de 12/24 horas, segundos, fecha y nombre de la zona.
- Dale estilo: haz clic en un tema de color o define tus propios colores y radio de esquina; la vista previa se actualiza al instante.
- Copia el código: usa HTML + JS para sitios web, iframe donde los scripts están bloqueados, o la pestaña Enlace para Notion, y pégalo en tu página.
¿Qué estilo de reloj va mejor en cada sitio?
| Uso | Configuración sugerida | Por qué |
|---|---|---|
| Recuadro de empresa "nuestra hora local" | Digital, ciudad concreta, 12 horas, sin segundos, con nombre de zona | Los clientes ven al instante si estás abierto; la abreviatura de zona (EST/EDT) elimina dudas. |
| Página de equipo remoto | Varios relojes digitales pequeños, uno por oficina | Se lee de un vistazo; cada fragmento es independiente. |
| Aula o página educativa | Analógico, números 1–12, grande, con segundos | Los números completos y un segundero en movimiento ayudan a los alumnos a leer una esfera analógica. |
| Barra lateral o pie de página de un blog | Analógico, marcas o puntos, pequeño, fondo transparente | Decorativo y discreto; se integra en cualquier tema. |
| Superposición de transmisión en vivo (OBS) | Fichas digitales, fondo transparente, pestaña Enlace | Añade el enlace como fuente de navegador; la transparencia deja visible la escena detrás. |
| Panel de Notion | Analógico + digital, mediano, con fecha | Una sola inserción da la esfera, la hora exacta y la fecha de hoy. |
Cómo sabe la hora el widget
El reloj lee el momento actual del dispositivo del visitante (Date.now(), milisegundos desde el 1 de enero de 1970 UTC) y lo convierte a la zona elegida con el Intl.DateTimeFormat integrado en el navegador y la base de datos de zonas horarias IANA. Como la zona se guarda por nombre, como Europe/London, y no como un desfase fijo, el reloj sigue el horario de verano y cualquier cambio futuro de reglas que conozcan los navegadores de tus visitantes.
Las manecillas analógicas usan los ángulos estándar, medidos en sentido horario desde las 12:
- Segundero = segundos × 6° (360° ÷ 60)
- Minutero = (minutos + segundos ÷ 60) × 6°
- Horario = (horas mod 12 + minutos ÷ 60) × 30° (360° ÷ 12)
Así, a las 3:30 la aguja de las horas está a 105°, justo entre el 3 y el 4, como en un reloj de pared real. Con la opción de barrido suave, el segundero también incluye los milisegundos y se desliza en lugar de saltar.
Consejos para un reloj de aspecto limpio
- Desactiva los segundos en relojes de horario comercial; un número que cambia distrae de tu contenido.
- Indica la ubicación ("Oficina central, Denver") cuando el nombre de la zona por sí solo pueda confundir a los visitantes.
- Usa el formato de 24 horas para públicos internacionales y horarios, y así evitar confusiones con AM/PM.
- Comprueba el contraste con los fondos de vista previa Oscuro y Cuadrícula antes de usar un fondo transparente.
- Usa un fragmento por reloj. Cada uno tiene un ID único, así que si copias el mismo código dos veces en una página solo se mostrará el primer reloj; genera uno nuevo.
Preguntas frecuentes
¿Cómo añado un reloj a mi página web?
Diseña el reloj, quédate en la pestaña de código HTML + JS y pulsa Copiar código. Pégalo en un bloque HTML personalizado (WordPress), un bloque de código (Squarespace), un elemento Embed HTML (Wix), un elemento Embed (Webflow) o directamente en el HTML de tu página. El reloj empieza a funcionar en cuanto se carga la página; no hacen falta archivos ni cuentas.
¿El widget de reloj tiene en cuenta el horario de verano?
Sí. El widget nunca fija un desfase en el código. Cada segundo pregunta al navegador del visitante qué hora es en la zona horaria IANA elegida (por ejemplo America/New_York), y los navegadores incluyen una base de datos de zonas horarias actualizada, así que el cambio entre horario estándar y de verano ocurre automáticamente en la fecha correcta.
¿Qué hace la opción 'Hora local del visitante'?
En lugar de una ciudad fija, el reloj muestra la zona horaria configurada en el dispositivo del visitante, así que un lector en Chicago ve la hora central y uno en París ve la hora de Europa central. Elige una zona con nombre cuando el reloj deba mostrar a todos la ubicación de tu oficina, tienda o evento.
¿Qué tan preciso es el reloj?
Es tan preciso como el reloj del dispositivo del visitante, que en teléfonos y la mayoría de computadoras se sincroniza automáticamente por internet y suele estar a una fracción de segundo de la hora oficial. El widget vuelve a leer la hora en cada tic en lugar de contar por su cuenta, así que nunca se desfasa aunque la pestaña haya estado suspendida.
¿Puedo poner varios relojes de distintas ciudades en una página?
Sí. Genera un reloj por ciudad y pega cada fragmento; cada uno recibe su propio ID aleatorio y CSS limitado, así que no interfieren entre sí. Para una pared rápida de zonas horarias de oficina, el tamaño Pequeño con estilo digital permite tres o cuatro relojes uno al lado del otro.
¿Cómo añado un reloj a Notion?
Abre la pestaña Enlace (Notion) y pulsa Copiar enlace. En Notion, escribe /embed, pega el enlace y elige Embed link, luego arrastra los bordes del bloque para ajustarlo. Toda la configuración se guarda dentro del enlace, así que no se guarda nada en un servidor y el reloj sigue funcionando.
¿El widget usa cookies o ralentiza mi página?
Sin cookies, sin rastreo y sin solicitudes externas. El fragmento son unos pocos kilobytes de HTML, CSS y JavaScript simple que actualiza la pantalla una vez por segundo (o con el cuadro de animación del navegador si activas el segundero de barrido suave, que se pausa automáticamente en las pestañas en segundo plano).
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.