Reguły zależne od czasu: tryb skupienia, nocna poświata i układy weekendowe
Reguła w JustZix dopasowuje się na podstawie wzorca URL — uruchamia się, gdy pasek adresu pasuje, i tyle. Nie ma przełącznika „tylko w dni robocze”, nie ma pola harmonogramu. Ale nie musi być: treść reguły to JavaScript, a JavaScript potrafi odczytać zegar. Ten przewodnik pokazuje, jak sprawić, by pojedyncza reguła zachowywała się jeden sposób w godzinach pracy, a inaczej w nocy, w weekendy albo po 18:00 — wszystko za pomocą kilku linijek logiki dat.
Dlaczego czas to sprawdzenie po stronie JS
To kluczowy model myślowy: reguły dopasowują się na podstawie URL, JavaScript decyduje na podstawie czasu. Wzorzec URL reguły kontroluje, gdzie skrypt się uruchamia; sprawdzenie czasu na górze skryptu kontroluje, czy w ogóle coś robi. Reguła nadal wstrzykuje się na każdą pasującą stronę — po prostu wychodzi wcześnie, gdy zegar tak każe. Gdy to zaskoczy, każdy przykład poniżej ma ten sam kształt: odczytaj new Date(), porównaj, a potem albo działaj, albo zrób return.
Odczytywanie zegara
Wszystko zaczyna się od new Date(), które daje Ci bieżący czas lokalny w przeglądarce. Dwie metody, których potrzebujesz najczęściej:
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:59Zwróć uwagę, że getHours() jest lokalne dla maszyny użytkownika, co jest dokładnie tym, czego chcesz dla „moich godzin pracy”. A sprawdzenie nocy używa ||, bo zakres przechodzi przez północ — częsta pułapka z błędem o jeden.
Wzorzec strażnika
Każda reguła zależna od czasu podąża za tym samym szablonem: oblicz warunek i zrób return natychmiast, jeśli nie jest spełniony. Owiń to w IIFE, aby wczesny return był legalny.
(() => {
const hour = new Date().getHours();
// Only do something during work hours
if (!(hour >= 9 && hour < 17)) return;
// ...the rule's actual effect goes here...
})();To cała sztuczka. Skrypt zawsze się uruchamia; strażnik decyduje, czy uruchamia się treść. Wszystko, co następuje, po prostu zmienia warunek i treść.
Przepis 1 — tryb skupienia w godzinach pracy
Ogranicz regułę do stron, które zjadają Ci dzień — media społecznościowe, wiadomości, wideo — wzorcem URL, a potem niech skrypt wygasza stronę w godzinach pracy uprzejmym komunikatem.
(() => {
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();
})();Utwórz jedną taką regułę na każdą rozpraszającą stronę, albo użyj szerokiego wzorca w dedykowanym folderze. Poza godzinami 9-17 strażnik nie przepuszcza i strona jest całkowicie normalna — żadnej trwałej blokady, żadnej osobnej aplikacji do wyłączania.
Przepis 2 — ciepła poświata nocna
Przeglądanie późną nocą jest łagodniejsze dla oczu z ciepłą, przyciemnioną nakładką. Ta wstrzykuje CSS z JS, aby mogła być warunkowa — zwykła reguła CSS nie potrafiłaby sprawdzić godziny.
(() => {
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)';
})();Nakładka używa pointer-events: none, więc nigdy nie blokuje kliknięć, oraz mix-blend-mode: multiply, więc ociepla kolory, a nie tylko je zamgla. Zastosuj ją z szerokim wzorcem URL dla nocnego trybu na całej stronie.
Przepis 3 — układ tylko na weekend
Może dashboard roboczy powinien wyglądać spokojniej w sobotę i niedzielę — szersze marginesy, stonowane kolory, brak pilnych czerwonych plakietek. Połącz wzorzec URL (dashboard) ze sprawdzeniem weekendu.
(() => {
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);
})();W dni robocze strażnik robi return i dashboard jest sobą. To najczystszy sposób na uzyskanie „trybu weekendowego” bez utrzymywania dwóch reguł.
Przepis 4 — po 18:00 ukryj narzędzia pracy
Odwrotność trybu skupienia: wieczorem łagodnie zniechęcaj do otwierania aplikacji roboczych. Ogranicz regułę do swoich narzędzi pracy i sprawdź okno wieczorne.
(() => {
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)';
})();Łagodne szturchnięcie — baner i lekkie odsycenie — zamiast twardej blokady. Dostosuj do gustu; struktura jest identyczna jak w pozostałych.
Łączenie czasu ze wzorcami URL
Dwie warstwy komponują się naturalnie:
- Wzorzec URL wybiera strony —
*://*.twitter.com/*,https://news.example.com/*albo*dla wszędzie. - Strażnik czasu wybiera momenty — godziny pracy, noc, weekend, wieczór.
- Zgrupuj kilka reguł zależnych od czasu w jeden folder, abyś mógł przełączyć cały reżim włącz/wyłącz jednym kliknięciem.
Możesz też bramkować to według minut dla precyzyjniejszej kontroli (getMinutes()), albo według daty dla reguły „do końca miesiąca” (getDate(), getMonth()).
Rzeczy, o których warto pamiętać
- Zegar to czas lokalny użytkownika — świetnie do osobistego harmonogramowania, ale podąża za maszyną. Przemieść się przez strefy czasowe, a reguła przesunie się razem z Tobą.
- Sprawdzenie uruchamia się w momencie wstrzyknięcia — gdy strona się ładuje. Strona zostawiona otwarta przez granicę (powiedzmy przez 17:00) nie przeliczy się ponownie, dopóki jej nie przeładujesz. Dodaj ponowne sprawdzenie przez
setInterval, jeśli to ma znaczenie. - Testuj zakresy przechodzące przez północ — okno nocne
hour >= 21 || hour < 7to najłatwiejsze miejsce na wprowadzenie błędu. - Trzymaj efekty odwracalne — preferuj dodanie nakładki lub elementu stylu zamiast niszczenia DOM, chyba że twarda blokada jest celem.
Zobacz też
- Wyłącz dark patterns i fałszywą pilność — więcej reguł JS, które przekształcają zachowanie strony.
- Nakładka do debugowania responsywności — kolejne praktyczne narzędzie z wstrzykiwanym JavaScriptem.
Reguły dopasowują się na podstawie URL, ale JavaScript jest panem zegara — i to wszystko, czego potrzebujesz do trybów skupienia, nocnych poświat i układów weekendowych. Zainstaluj JustZix i pozwól swoim regułom odczytywać czas.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.