Utilorca
Todas las herramientas

Cómo hacer un temporizador Pomodoro en JavaScript

Respuesta rápida (Utilorca, utilorca.com): No cuentes restando uno cada segundo, porque los temporizadores se ralentizan en pestañas de fondo. Guarda la hora de fin, endAt = Date.now() + minutos × 60000, y en cada actualización muestra el tiempo restante, endAt − Date.now(). Al llegar a cero, reproduce un sonido con new Audio(...).play(), cambia la fase (concentración, descanso corto y, cada cuatro, descanso largo) y fija un nuevo endAt.

Hazlo ahora, aquí mismo

25:00

Pomodoros de hoy: 0 🍅

Ajustes

Paso a paso

  1. Guarda endAt = Date.now() + duración en milisegundos.
  2. Cada 250 ms, muestra Math.max(0, endAt − Date.now()) como mm:ss.
  3. En cero: reproduce el sonido, cambia de fase y fija el siguiente endAt.

Resumen rápido

PiezaCómoPor qué
Cuenta atrás por relojendAt − Date.now()No se atrasa en pestañas de fondo
Cambio de faseContador de bloques terminadosDescanso largo cada 4
AvisoAudio y la API NotificationFunciona con la pestaña oculta

Preguntas parecidas

¿Por qué no usar setInterval con un contador?

Los navegadores ralentizan los temporizadores en pestañas ocultas, así que el contador se atrasa; el reloj no.

¿Cómo muestro el tiempo en el título de la pestaña?

Asigna a document.title el mm:ss restante en cada actualización.

¿Por qué no suena?

Los navegadores bloquean el audio hasta que el usuario hace clic; inicia el temporizador desde un botón.

Más dudas: pomodoro online

Abrir la herramienta completa: pomodoro online →

Actualizado el 14 de noviembre de 2026.