Правила по времени: режим фокуса, ночной оттенок и выходная вёрстка

16 мая 2026 · автор JustZix Team

Правило в JustZix совпадает по URL-паттерну — оно срабатывает, когда адресная строка совпадает, и всё. Нет переключателя «только по будням», нет поля расписания. Но оно и не нужно: тело правила — это JavaScript, а JavaScript умеет читать часы. Это руководство показывает, как заставить одно правило вести себя так в рабочие часы и иначе ночью, в выходные или после 18:00 — всего несколькими строчками логики дат.

Почему время — это проверка на стороне JS

Вот ключевая ментальная модель: правила совпадают по URL, JavaScript решает по времени. URL-паттерн правила контролирует, где запускается скрипт; проверка времени в начале скрипта контролирует, делает ли он что-нибудь вообще. Правило всё равно внедряется на каждую совпадающую страницу — оно просто выходит рано, когда часы так велят. Как только это укладывается в голове, каждый пример ниже имеет одну и ту же форму: прочитать new Date(), сравнить, затем либо действовать, либо выйти.

Читаем часы

Всё начинается с new Date(), который даёт тебе текущее локальное время в браузере. Два метода, нужные тебе чаще всего:

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

Заметь, getHours() локален к машине пользователя, что ровно то, что нужно для «моих рабочих часов». А проверка ночи использует ||, потому что диапазон переходит за полночь — частая ловушка с ошибкой на единицу.

Паттерн «страж»

Каждое правило по времени следует одному шаблону: вычислить условие и сразу return, если оно не выполнено. Оберни это в IIFE, чтобы ранний return был легален.

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

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

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

В этом весь трюк. Скрипт всегда запускается; страж решает, запускается ли тело. Всё дальнейшее лишь меняет условие и тело.

Рецепт 1 — режим фокуса в рабочие часы

Ограничь правило сайтами, которые съедают твой день, — соцсети, новости, видео — URL-паттерном, а затем пусть скрипт затемняет страницу в рабочие часы с вежливым сообщением.

(() => {
  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();
})();

Создай по одному такому правилу на каждый отвлекатель или используй широкий паттерн в выделенной папке. Вне 9-17 страж не проходит, и сайт совершенно нормален — никакой постоянной блокировки, никакого отдельного приложения, которое надо отключать.

Рецепт 2 — тёплый ночной оттенок

Ночной просмотр легче для глаз с тёплым, приглушённым оверлеем. Этот внедряет CSS из JS, чтобы его можно было сделать условным — обычное CSS-правило не смогло бы проверить час.

(() => {
  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)';
})();

Оверлей использует pointer-events: none, чтобы никогда не блокировать клики, и mix-blend-mode: multiply, чтобы он согревал цвета, а не просто затуманивал их. Применяй его с широким URL-паттерном для ночного режима по всему сайту.

Рецепт 3 — вёрстка только для выходных

Может быть, рабочий дашборд должен выглядеть спокойнее в субботу и воскресенье — шире поля, приглушённые цвета, никаких срочно-красных бейджей. Соедини URL-паттерн (дашборд) с проверкой выходных.

(() => {
  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);
})();

По будням страж возвращает управление, и дашборд остаётся самим собой. Это самый чистый способ получить «режим выходных» без поддержки двух правил.

Рецепт 4 — после 18:00 прячем рабочие инструменты

Обратное режиму фокуса: вечером мягко отговаривай от открытия рабочих приложений. Ограничь правило своими рабочими инструментами и проверь вечернее окно.

(() => {
  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)';
})();

Мягкий толчок — баннер и лёгкое обесцвечивание — а не жёсткая блокировка. Подстрой по вкусу; структура идентична остальным.

Сочетаем время с URL-паттернами

Два слоя естественно компонуются:

URL-паттерн выбирает сайты — *://*.twitter.com/*, https://news.example.com/* или * для всего.
Страж по времени выбирает моменты — рабочие часы, ночь, выходные, вечер.
Сгруппируй несколько правил по времени в одну папку, чтобы можно было переключать весь режим целиком одним кликом.

Ты также можешь ограничить это по минуте для более тонкого контроля (getMinutes()) или по дате для правила «до конца месяца» (getDate(), getMonth()).

О чём стоит помнить

Часы — это локальное время пользователя — отлично для личного планирования, но они следуют за машиной. Пересеки часовые пояса в путешествии — и правило сдвинется вместе с тобой.
Проверка выполняется в момент внедрения — когда страница загружается. Страница, оставленная открытой через границу (скажем, через 17:00), не пересчитается, пока ты не перезагрузишь. Добавь перепроверку setInterval, если это важно.
Тестируй диапазоны с переходом через полночь — ночное окно hour >= 21 || hour < 7 — самое лёгкое место внести баг.
Делай эффекты обратимыми — предпочитай добавление оверлея или элемента стиля разрушению DOM, если только жёсткая блокировка не является самой целью.

Смотри также

Отключаем тёмные паттерны и фальшивую срочность — больше JS-правил, меняющих поведение сайта.
Оверлей для отладки адаптива — ещё один практичный инструмент на внедрённом JavaScript.

Правила совпадают по URL, но JavaScript владеет часами — и это всё, что нужно для режимов фокуса, ночных оттенков и выходной вёрстки. Установи JustZix — и пусть твои правила знают, который час.

Оцени эту статью

Оценок пока нет — оцени первым.