Reglas basadas en el tiempo: modo concentración, tinte nocturno y maquetaciones de fin de semana

16 mayo 2026 · por JustZix Team

Una regla en JustZix coincide por un patrón de URL — se dispara cuando la barra de direcciones coincide, y ya está. No hay un conmutador de «solo entre semana», ni un campo de horario. Pero no hace falta que lo haya: el cuerpo de la regla es JavaScript, y JavaScript puede leer el reloj. Esta guía muestra cómo hacer que una sola regla se comporte de una manera durante el horario laboral y de otra por la noche, los fines de semana o después de las 18:00 — todo con unas pocas líneas de lógica de fechas.

Por qué el tiempo es una comprobación del lado JS

Este es el modelo mental clave: las reglas coinciden por URL, JavaScript decide sobre el tiempo. El patrón de URL de la regla controla dónde se ejecuta el script; una comprobación de tiempo al principio del script controla si hace algo. La regla sigue inyectándose en cada página que coincide — simplemente sale pronto cuando el reloj lo dice. Una vez que esto encaja, cada ejemplo de abajo tiene la misma forma: lee new Date(), compara, y luego actúa o retorna.

Leer el reloj

Todo empieza con new Date(), que te da la hora local actual en el navegador. Los dos métodos que más necesitas:

const now = new Date();

const hour = now.getHours();      // 0-23, local time
const day  = now.getDay();        // 0 = Sunday ... 6 = Saturday

const isWeekend = day === 0 || day === 6;
const isWorkHours = hour >= 9 && hour < 17;   // 09:00-16:59
const isNight = hour >= 21 || hour < 7;        // 21:00-06:59

Fíjate en que getHours() es local a la máquina del usuario, que es exactamente lo que quieres para «mi horario laboral». Y la comprobación de noche usa || porque el rango cruza la medianoche — una trampa habitual de error por uno.

El patrón de guarda

Toda regla basada en el tiempo sigue la misma plantilla: calcula una condición, y haz return inmediatamente si no se cumple. Envuélvelo en una IIFE para que el return temprano sea legal.

(() => {
  const hour = new Date().getHours();

  // Only do something during work hours
  if (!(hour >= 9 && hour < 17)) return;

  // ...the rule's actual effect goes here...
})();

Ese es todo el truco. El script siempre se ejecuta; la guarda decide si el cuerpo se ejecuta. Todo lo que sigue solo cambia la condición y el cuerpo.

Receta 1 — modo concentración durante el horario laboral

Acota una regla a los sitios que se comen tu día — redes sociales, noticias, vídeo — con un patrón de URL, y luego haz que el script ponga la página en blanco durante el horario laboral con un mensaje educado.

(() => {
  const hour = new Date().getHours();
  const day = new Date().getDay();
  const working = day >= 1 && day <= 5
    && hour >= 9 && hour < 17;
  if (!working) return;

  document.documentElement.innerHTML =
    '<body style="margin:0;display:flex;height:100vh;'
    + 'align-items:center;justify-content:center;'
    + 'font:600 22px system-ui;background:#0f172a;color:#e2e8f0">'
    + 'Focus mode — this site is off until 17:00</body>';

  // Stop the page doing anything else
  window.stop();
})();

Crea una regla así por cada distracción, o usa un patrón amplio en una carpeta dedicada. Fuera del horario de 9 a 5, la guarda falla y el sitio es completamente normal — sin bloqueo permanente, sin una app aparte que desactivar.

Receta 2 — tinte cálido nocturno

La navegación nocturna es más amable con los ojos con una capa cálida y atenuada. Esta inyecta CSS desde JS para que pueda ser condicional — una regla CSS plana no podría comprobar la hora.

(() => {
  const hour = new Date().getHours();
  if (!(hour >= 21 || hour < 7)) return;

  const tint = document.createElement('div');
  Object.assign(tint.style, {
    position: 'fixed', inset: '0',
    background: 'rgba(255, 147, 41, 0.18)',
    pointerEvents: 'none',
    zIndex: 2147483600,
    mixBlendMode: 'multiply',
  });
  document.documentElement.appendChild(tint);

  // Also dim overall brightness a touch
  document.documentElement.style.filter = 'brightness(0.9)';
})();

La capa usa pointer-events: none para no bloquear nunca los clics, y mix-blend-mode: multiply para calentar los colores en lugar de solo empañarlos. Aplícala con un patrón de URL amplio para un modo nocturno en todo el sitio.

Receta 3 — una maquetación solo de fin de semana

Quizá un panel de trabajo debería verse más tranquilo el sábado y el domingo — márgenes más anchos, colores apagados, sin insignias rojas de urgencia. Combina el patrón de URL (el panel) con una comprobación de fin de semana.

(() => {
  const day = new Date().getDay();
  if (day !== 0 && day !== 6) return;   // weekdays: do nothing

  const css = document.createElement('style');
  css.textContent = `
    body { max-width: 900px; margin: 0 auto; }
    .badge-urgent, .alert-red { filter: grayscale(1); }
    .notifications { display: none !important; }
  `;
  document.head.appendChild(css);
})();

Entre semana la guarda retorna y el panel es su yo normal. Esta es la forma más limpia de obtener un «modo fin de semana» sin mantener dos reglas.

Receta 4 — después de las 18:00, ocultar las herramientas de trabajo

El inverso del modo concentración: por la tarde, desanima suavemente abrir las apps de trabajo. Acota la regla a tus herramientas de trabajo y comprueba la ventana de la tarde.

(() => {
  const now = new Date();
  const hour = now.getHours();
  const day = now.getDay();

  // After 18:00, or anytime on the weekend
  const offHours = hour >= 18 || day === 0 || day === 6;
  if (!offHours) return;

  const banner = document.createElement('div');
  banner.textContent = 'It is after hours. Sure you need this now?';
  Object.assign(banner.style, {
    position: 'fixed', top: '0', left: '0', right: '0',
    background: '#b45309', color: '#fff',
    font: '600 14px system-ui', textAlign: 'center',
    padding: '10px', zIndex: 2147483600,
  });
  document.body.appendChild(banner);
  document.body.style.filter = 'grayscale(0.4)';
})();

Un empujón suave — un banner y una ligera desaturación — en lugar de un bloqueo duro. Ajústalo a tu gusto; la estructura es idéntica a las demás.

Combinar el tiempo con los patrones de URL

Las dos capas se componen de forma natural:

El patrón de URL elige los sitios — *://*.twitter.com/*, https://news.example.com/*, o * para todas partes.
La guarda de tiempo elige los momentos — horario laboral, noche, fin de semana, tarde.
Agrupa varias reglas basadas en el tiempo en una carpeta para poder activar o desactivar todo el régimen en un clic.

También puedes condicionarlo por minuto para un control más fino (getMinutes()), o por fecha para una regla «hasta fin de mes» (getDate(), getMonth()).

Cosas que tener en cuenta

El reloj es la hora local del usuario — genial para la planificación personal, pero sigue a la máquina. Viaja entre zonas horarias y la regla se desplaza contigo.
La comprobación se ejecuta en el momento de la inyección — cuando la página carga. Una página dejada abierta cruzando un límite (digamos a través de las 17:00) no se reevaluará hasta que recargues. Añade una recomprobación con setInterval si eso importa.
Prueba los rangos que cruzan — la ventana nocturna hour >= 21 || hour < 7 es el sitio más fácil para introducir un bug.
Mantén los efectos reversibles — prefiere añadir una capa o un elemento de estilo a destruir el DOM, a menos que un bloqueo duro sea el objetivo.

Mira también

Desactivar patrones oscuros y urgencia falsa — más reglas JS que remodelan cómo se comporta un sitio.
Una capa de depuración responsive — otra herramienta práctica de JavaScript inyectado.

Las reglas coinciden por URL, pero JavaScript es el dueño del reloj — y eso es todo lo que necesitas para modos de concentración, tintes nocturnos y maquetaciones de fin de semana. Instala JustZix y deja que tus reglas digan la hora.

Valora este artículo

Sin valoraciones — sé el primero.