Regole basate sul tempo: modalita focus, tinta notturna e layout del weekend
Una regola in JustZix corrisponde a un pattern di URL — si attiva quando la barra degli indirizzi corrisponde, e basta. Non c'e un interruttore "solo nei giorni feriali", nessun campo di programmazione. Ma non serve che ci sia: il corpo della regola e JavaScript, e JavaScript puo leggere l'orologio. Questa guida mostra come far comportare una singola regola in un modo durante l'orario di lavoro e in un altro di notte, nel weekend o dopo le 18 — tutto con poche righe di logica sulle date.
Perche il tempo e un controllo lato JS
Questo e il modello mentale chiave: le regole corrispondono all'URL, JavaScript decide sul tempo. Il pattern di URL della regola controlla dove gira lo script; un controllo del tempo in cima allo script controlla se fa qualcosa. La regola si inietta comunque su ogni pagina corrispondente — esce solo presto quando l'orologio lo dice. Una volta che questo e chiaro, ogni esempio qui sotto ha la stessa forma: leggi new Date(), confronta, poi o agisci o esci.
Leggere l'orologio
Tutto parte da new Date(), che ti da l'ora locale corrente nel browser. I due metodi che ti servono di piu:
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:59Nota che getHours() e locale alla macchina dell'utente, che e esattamente cio che vuoi per "il mio orario di lavoro". E il controllo notturno usa || perche l'intervallo scavalca la mezzanotte — una comune trappola da errore di uno.
Lo schema della guardia
Ogni regola basata sul tempo segue lo stesso modello: calcola una condizione, ed esegui return subito se non e soddisfatta. Avvolgila in una IIFE cosi il return anticipato e lecito.
(() => {
const hour = new Date().getHours();
// Only do something during work hours
if (!(hour >= 9 && hour < 17)) return;
// ...the rule's actual effect goes here...
})();Questo e tutto il trucco. Lo script gira sempre; la guardia decide se il corpo gira. Tutto cio che segue cambia solo la condizione e il corpo.
Ricetta 1 — modalita focus durante l'orario di lavoro
Circoscrivi una regola ai siti che ti divorano la giornata — social media, notizie, video — con un pattern di URL, poi fai oscurare la pagina allo script durante l'orario di lavoro con un messaggio cortese.
(() => {
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 regola del genere per distrazione, o usa un pattern ampio in una cartella dedicata. Fuori dal 9-17, la guardia fallisce e il sito e del tutto normale — nessun blocco permanente, nessuna app separata da disattivare.
Ricetta 2 — tinta calda notturna
La navigazione a tarda notte e piu riposante per gli occhi con un overlay caldo e attenuato. Questa inietta CSS da JS cosi puo essere condizionale — una semplice regola CSS non potrebbe controllare l'ora.
(() => {
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)';
})();L'overlay usa pointer-events: none cosi non blocca mai i clic, e mix-blend-mode: multiply cosi riscalda i colori invece di limitarsi ad annebbiarli. Applicalo con un pattern di URL ampio per una modalita notturna su tutto il sito.
Ricetta 3 — un layout solo per il weekend
Forse una dashboard di lavoro dovrebbe apparire piu calma il sabato e la domenica — margini piu larghi, colori smorzati, niente distintivi rosso-urgenza. Combina il pattern di URL (la dashboard) con un controllo del weekend.
(() => {
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);
})();Nei giorni feriali la guardia esegue il return e la dashboard e quella di sempre. Questo e il modo piu pulito per ottenere una "modalita weekend" senza mantenere due regole.
Ricetta 4 — dopo le 18, nascondi gli strumenti di lavoro
L'inverso della modalita focus: di sera, scoraggia gentilmente l'apertura delle app di lavoro. Circoscrivi la regola ai tuoi strumenti di lavoro e controlla la finestra serale.
(() => {
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)';
})();Una spinta gentile — un banner e una leggera desaturazione — piuttosto che un blocco netto. Adatta a gusto; la struttura e identica alle altre.
Combinare il tempo con i pattern di URL
I due livelli si compongono naturalmente:
- Il pattern di URL sceglie i siti —
*://*.twitter.com/*,https://news.example.com/*, o*per ovunque. - La guardia del tempo sceglie i momenti — orario di lavoro, notte, weekend, sera.
- Raggruppa piu regole basate sul tempo in un'unica cartella cosi puoi attivare o disattivare l'intero regime con un clic.
Puoi anche regolarlo al minuto per un controllo piu fine (getMinutes()), o per data per una regola "fino a fine mese" (getDate(), getMonth()).
Cose da tenere a mente
- L'orologio e l'ora locale dell'utente — ottimo per la programmazione personale, ma segue la macchina. Viaggia attraverso fusi orari e la regola si sposta con te.
- Il controllo gira al momento dell'iniezione — quando la pagina si carica. Una pagina lasciata aperta attraverso un confine (per esempio attraverso le 17) non si rivalutera finche non ricarichi. Aggiungi un ricontrollo con
setIntervalse conta. - Testa gli intervalli che scavalcano — la finestra notturna
hour >= 21 || hour < 7e il posto piu facile dove introdurre un bug. - Mantieni gli effetti reversibili — preferisci aggiungere un overlay o un elemento di stile piuttosto che distruggere il DOM, a meno che un blocco netto non sia lo scopo.
Vedi anche
- Disattiva i dark pattern e la falsa urgenza — altre regole JS che rimodellano il comportamento di un sito.
- Un overlay di debug responsive — un altro strumento pratico di JavaScript iniettato.
Le regole corrispondono all'URL, ma JavaScript possiede l'orologio — ed e tutto cio che ti serve per modalita focus, tinte notturne e layout del weekend. Installa JustZix e lascia che le tue regole sappiano che ore sono.
Valuta questo articolo
Nessuna valutazione — sii il primo.