Temporizador de Cuenta Regresiva
Crea temporizadores de cuenta regresiva con tiempo personalizado y recordatorios
Configurar Tiempo
¿Qué es un Temporizador de Cuenta Regresiva?
Un temporizador de cuenta atrás parte de una duración definida y baja hasta cero. Es útil para trabajo concentrado, cocina, intervalos de ejercicio, clases, reuniones, discursos y cualquier tarea donde importe respetar un bloque de tiempo fijo. A diferencia de un cronómetro, que mide el tiempo transcurrido desde cero, la cuenta atrás muestra cuánto queda y dónde termina la actividad. Esa visibilidad ayuda a ajustar el ritmo, cerrar a tiempo y evitar retrasos. Esta página también incluye modo cronómetro y varios temporizadores, por lo que sirve para vueltas, tramos y tareas paralelas. Como funciona dentro de la pestaña abierta del navegador, conviene mantenerla activa cuando la alerta sea importante.
Cómo usar
Cómo usar
- Selecciona una pestaña: Cuenta atrás, Cronómetro o Multitemporizador
- Para Cuenta atrás: introduce horas, minutos y segundos, o haz clic en los tiempos predefinidos
- Haz clic en 'Iniciar' para comenzar y en 'Pausar' para pausar
- Se reproduce una alerta sonora cuando finaliza la cuenta atrás
Notas de temporización
- Los temporizadores del navegador pueden pausarse o desincronizarse cuando la pestaña está en segundo plano, el dispositivo entra en reposo o se activa el modo de ahorro de energía.
- Para reuniones, exámenes o trabajo de producción, mantén un reloj del sistema o un temporizador dedicado como referencia final.
Casos de uso
Principio técnico
El motor de cuenta regresiva no usa setInterval(callback, 1000) como reloj autoritativo, ya que ese enfoque acumula desviación porque la especificación del bucle de eventos de HTML5 solo garantiza un retardo mínimo y no una cadencia fija. En su lugar, la página registra un startTime mediante Date.now() (o performance.now() para resolución submilisegundo) y en cada tick calcula remaining = targetDuration - (Date.now() - startTime). La actualización visual se controla con requestAnimationFrame, que el navegador limita a la tasa de vsync de la pantalla (normalmente 60 Hz / 16,67 ms, a veces 120 Hz en portátiles y teléfonos de alta frecuencia de refresco). Este diseño autocorrectivo mantiene los segundos mostrados alineados con el reloj real incluso después de que la cola de tareas de JavaScript se detenga por la recolección de basura o un layout prolongado. La limitación en segundo plano es la fuente principal de sorpresas con temporizadores. Según el HTML Living Standard, las pestañas ocultas restringen setInterval/setTimeout a un mínimo de 1000 ms (Chrome, Firefox e implementan esto con sus propias heurísticas; Chrome además congela las pestañas inactivas tras unos 5 minutos con batería). La Page Visibility API (document.visibilityState, document.hidden, el evento visibilitychange) permite al temporizador detectar un cambio de pestaña y reconciliar su reloj interno con Date.now() cuando la pestaña vuelve a ser visible. El sonido de fin de cuenta regresiva se reproduce a través de la Web Audio API (AudioContext + OscillatorNode o un AudioBuffer precargado), que requiere una activación previa por gesto del usuario en iOS Safari y Chrome moderno para cumplir la política de autoplay. También se muestra una alerta visual como respaldo y, si el usuario ha concedido permiso previamente, se puede publicar una notificación a nivel del sistema operativo a través de la Notification API. El modo de múltiples temporizadores mantiene cada temporizador en su propio objeto de estado con un startTime independiente; un solo bucle de requestAnimationFrame itera sobre el array en cada frame en lugar de crear un intervalo separado por temporizador, lo que mantiene el trabajo de CPU constante a medida que crece el número. La persistencia entre recargas usa localStorage con un endTime serializado, de modo que la página puede recalcular el tiempo restante al montarse. Ten en cuenta que las correcciones del reloj real por parte del sistema operativo (cambio manual de hora, salto de NTP o transición de horario de verano/invierno) desplazan Date.now() instantáneamente y pueden hacer que un temporizador recuperado parezca saltar; performance.now() es monótono y es preferible cuando solo importa el tiempo transcurrido dentro de una sola carga de página.
- Usar Date.now() o performance.now() como fuente de verdad; nunca confiar en ticks acumulados de setInterval.
- requestAnimationFrame limita el repintado a la vsync de la pantalla (60 Hz = ~16,67 ms; 120 Hz = ~8,33 ms).
- Las pestañas ocultas restringen setInterval a un mínimo de 1000 ms según la especificación HTML; Chrome puede congelar la página tras ~5 min con batería.
- La Page Visibility API (evento visibilitychange) es el gancho para reconciliar el temporizador cuando la pestaña vuelve al primer plano.
- La Web Audio API necesita una activación previa por gesto del usuario en iOS Safari y Chrome para cumplir la política de autoplay.
- La Notification API requiere Notification.requestPermission() y un contexto seguro (HTTPS o localhost).
- performance.now() es monóntono a través de saltos de NTP y cambios de horario de verano/invierno; Date.now() no lo es: elige en consecuencia.
Ejemplos
Bloque de trabajo Pomodoro (25 min de enfoque + 5 min de descanso)
Modo : Cuenta regresiva
Duración : 00 : 25 : 00
Inicio : 14:00:00
Fin : 14:25:00 (suena la alarma)
Siguiente : temporizador de descanso de 5 minutos (preestablecido)Cocina - huevo pasado por agua (6 min 30 s)
Modo : Cuenta regresiva
Ajuste : 00 : 06 : 30
A 1:00 -> aviso visual resalta el tiempo restante
A 0:00 -> alarma + banner en la página: ¡Cuenta regresiva completada!Cronómetro con vueltas (entrenamiento de 1 km)
Inicio -> 00:00.00
Vuelta 1 -> 04:12.80 (parcial 04:12.80)
Vuelta 2 -> 08:31.45 (parcial 04:18.65)
Vuelta 3 -> 12:48.10 (parcial 04:16.65)
Final -> 16:55.30 (parcial 04:07.20 más rápida)Multi-temporizador para HIIT (30s trabajo / 15s descanso x 4)
Temporizador A: 00:30 (trabajo) -> alarma
Temporizador B: 00:15 (descanso) -> alarma
Temporizador C: 00:30 (trabajo) -> alarma
Temporizador D: 00:15 (descanso) -> alarma
Sesión total: 3 minutos, mantén la pestaña visible para que las alarmas suenen a tiempo.Vigilancia de examen - bloque de escritura de 45 minutos
Duración : 00 : 45 : 00
Inicio : 09:15:00
Fin : 10:00:00
Consejo: deja la pestaña en primer plano - las pestañas en segundo plano pueden limitar setInterval y desviarse varios segundos en 45 minutos.Preguntas frecuentes
¿La cuenta atrás sigue corriendo si cambio de pestaña?
Los navegadores modernos limitan las pestañas en segundo plano a aproximadamente 1 actualización por segundo para ahorrar batería, así que el valor mostrado puede ir un poco retrasado al volver. Sin embargo, el cálculo subyacente se basa en tiempo absoluto, así que el total transcurrido es correcto. La cuenta atrás se ajusta al valor correcto en cuanto enfocas la pestaña.
¿Sonará la alarma si la pestaña está en segundo plano?
Algunos navegadores y ajustes de ahorro de energía del sistema operativo restringen la reproducción de audio en pestañas en segundo plano. La alarma se reproduce mediante la Web Audio API y requiere una interacción previa del usuario. Mantén la pestaña enfocada o visible si la alerta es importante.
¿Qué pasa si el ordenador entra en suspensión?
El cálculo de tiempo se basa en Date.now() (reloj de pared), por lo que sigue siendo correcto incluso mientras el sistema estaba dormido. La pantalla se actualiza al despertar. La alarma audible, en cambio, no sonará mientras el sistema esté suspendido.
¿Qué precisión tiene el temporizador?
La pantalla se actualiza cada segundo, pero internamente la página usa marcas de tiempo con precisión de milisegundos. La precisión real está limitada por la limitación de pestañas en segundo plano (las pestañas en segundo plano pierden precisión) y por la latencia de salida de audio para la alarma (normalmente <100 ms). Para precisión de física o ingeniería de audio, usa hardware especializado.
¿Puedo guardar duraciones predefinidas?
Hay botones rápidos para duraciones comunes (5 min, 10 min, 25 min, 45 min, 1 hora). Son atajos integrados, no preajustes personalizables por el usuario. Cerrar la pestaña pierde el estado actual del temporizador.
¿Y el horario de verano?
La cuenta atrás usa segundos transcurridos, no fechas de reloj de pared, así que los cambios de horario de verano no le afectan. Una cuenta atrás de 2 horas iniciada 30 minutos antes del «adelanto» de hora termina 90 minutos después, correctamente.
¿Se sube algo a un servidor?
No. El temporizador se ejecuta enteramente en tu navegador. Los preajustes personalizados y el historial se almacenan localmente si lo activas.