Generador de cuenta regresiva: código HTML y React gratis, sin registro | We.Inc
Crea una cuenta regresiva para tu sitio web. Define la fecha y la zona horaria, elige un estilo y copia HTML sencillo o un componente React. Sin cuenta, sin widget de rastreo, sin scripts externos.
Una cuenta regresiva en un sitio web compara una fecha límite fija con el reloj del visitante una vez por segundo y muestra los días, horas, minutos y segundos que quedan. Define abajo tu fecha, hora y zona horaria, elige un estilo y copia HTML autónomo o un componente React. El código se ejecuta en tu página sin scripts de terceros ni cuentas.
Dos tipos de cuenta regresiva
Tipo
Fecha límite
Úsala para
Fecha fija
El mismo momento para todos
Lanzamientos, eventos, ofertas que terminan a una hora real
Por visitante
Un número fijo de horas desde la primera visita de cada persona
Ofertas de bienvenida que caducan de verdad para esa persona
Elige una fecha y la zona horaria a la que pertenece la fecha límite, escoge uno de los tres estilos y un color de acento, y mira el resultado en vivo abajo. El resultado es un único bloque de HTML, CSS y JavaScript, o un componente React con clases de Tailwind.
Elige la fecha y la hora límite y después su zona horaria. El código guarda el momento exacto en UTC, así que los visitantes de otras zonas ven el tiempo restante correcto.
O cambia a una cuenta regresiva por visitante e indica cuántas horas tiene cada visitante.
Elige un estilo y un color de acento y edita el encabezado y el mensaje que aparece cuando se acaba el tiempo.
Copia el código HTML para incrustar o el componente React y pégalo donde deba aparecer el temporizador.
Muestra una cuenta regresiva solo para una fecha límite real. Los temporizadores que se reinician o nunca terminan engañan a los visitantes, y la Comisión Federal de Comercio de EE. UU. incluye las cuentas atrás falsas entre las prácticas de diseño engañosas.
Indica en el mensaje final qué pasa al llegar a cero, por ejemplo que la oferta ha terminado o que el evento ha empezado, con un enlace al siguiente paso.
El temporizador usa el reloj del dispositivo del visitante. Si ese reloj está mal, la cuenta regresiva también, así que nunca la uses como única comprobación de un corte real; aplica también las fechas límite en tu servidor.
Deja a los lectores de pantalla fuera de las actualizaciones de cada segundo. El código marca el temporizador con role timer y aria-live off para que no anuncie cada tic.
Preguntas frecuentes
¿Cómo añado una cuenta regresiva a mi sitio web?
Copia el código HTML para incrustar y pégalo en tu página donde deba ir el temporizador. La mayoría de los creadores de sitios tienen un bloque HTML o de inserción para esto. Si tu sitio está hecho con React, copia el componente y renderízalo como cualquier otro.
¿El temporizador será correcto para visitantes de otras zonas horarias?
Sí. La herramienta convierte tu fecha y zona horaria en un único momento exacto en UTC y escribe ese número en el código. El navegador de cada visitante cuenta hacia ese mismo momento, sea cual sea su hora local.
¿Qué hace la opción por visitante?
Inicia la cuenta regresiva de cada visitante en su primera visita y guarda ese momento en su navegador, así que recargar la página no la reinicia. Borrar los datos del sitio o cambiar de dispositivo inicia una nueva, así que úsala solo para ofertas que estés dispuesto a respetar en ese caso.
¿Puedo poner esta cuenta regresiva en un email?
No. Los clientes de correo no ejecutan JavaScript. Las cuentas regresivas en emails son imágenes animadas que genera un servidor en el momento en que se abre el email, algo que una página estática no puede ofrecer.
Por qué el código guarda UTC
Una fecha como el 1 de diciembre a las 9:00 corresponde a momentos distintos en Toronto y en Karachi. Guardar la fecha límite como un timestamp UTC elimina esa ambigüedad y además gestiona los cambios de horario de verano, ya que la conversión usa las reglas de la zona que elegiste para esa fecha exacta.
Después, el script resta la hora actual a la fecha límite en cada tic y divide la diferencia en días, horas, minutos y segundos.
Mantener el temporizador preciso y ligero
Los navegadores ralentizan los temporizadores en las pestañas en segundo plano, así que una cuenta regresiva que simplemente resta un segundo en cada tic se desajusta. Este código recalcula a partir del reloj cada vez y programa la siguiente actualización para el inicio del siguiente segundo, así que sigue siendo correcta cuando vuelves a la pestaña.
No hay librerías ni peticiones externas, lo que mantiene la página rápida y evita enviar datos de los visitantes a un proveedor de widgets.