DE

← Alle Beiträge

Leitfäden

Zeitbasierte Regeln: Fokusmodus, Nachttönung und Wochenend-Layouts

· von JustZix Team

Eine Regel in JustZix greift bei einem URL-Muster — sie feuert, wenn die Adressleiste passt, und das war's. Es gibt keinen „nur an Wochentagen"-Schalter, kein Zeitplan-Feld. Aber es muss auch keinen geben: Der Regelkörper ist JavaScript, und JavaScript kann die Uhr lesen. Diese Anleitung zeigt, wie du eine einzelne Regel während der Arbeitsstunden auf eine Art und nachts, am Wochenende oder nach 18 Uhr auf eine andere Art verhalten lässt — alles mit ein paar Zeilen Datums-Logik.

Warum Zeit eine JS-seitige Prüfung ist

Das ist das zentrale Denkmodell: Regeln greifen bei einer URL, JavaScript entscheidet über die Zeit. Das URL-Muster der Regel steuert, wo das Skript läuft; eine Zeitprüfung am Anfang des Skripts steuert, ob es überhaupt etwas tut. Die Regel injiziert sich weiterhin auf jeder passenden Seite — sie steigt nur früh aus, wenn die Uhr es sagt. Sobald das klick macht, hat jedes Beispiel unten dieselbe Form: new Date() lesen, vergleichen, dann entweder handeln oder zurückkehren.

Die Uhr lesen

Alles beginnt mit new Date(), was dir die aktuelle Ortszeit im Browser gibt. Die zwei Methoden, die du am meisten brauchst:

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

Beachte: getHours() ist lokal zur Maschine des Nutzers, was genau das ist, was du für „meine Arbeitsstunden" willst. Und die Nachtprüfung nutzt ||, weil der Bereich über Mitternacht hinaus umschlägt — eine häufige Off-by-one-Falle.

Das Guard-Muster

Jede zeitbasierte Regel folgt derselben Vorlage: Berechne eine Bedingung und kehre sofort mit return zurück, wenn sie nicht erfüllt ist. Umhülle es mit einer IIFE, damit das frühe return erlaubt ist.

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

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

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

Das ist der ganze Trick. Das Skript läuft immer; der Guard entscheidet, ob der Körper läuft. Alles Folgende ändert nur die Bedingung und den Körper.

Rezept 1 — Fokusmodus während der Arbeitsstunden

Grenze eine Regel auf die Seiten ab, die deinen Tag fressen — soziale Medien, Nachrichten, Video — mit einem URL-Muster, und lass das Skript die Seite während der Arbeitsstunden mit einer höflichen Nachricht leeren.

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

Erstelle eine solche Regel pro Ablenkung oder nutze ein breites Muster in einem eigenen Ordner. Außerhalb von 9 bis 17 Uhr scheitert der Guard und die Seite ist völlig normal — keine dauerhafte Sperre, keine separate App zum Deaktivieren.

Rezept 2 — warme Nachttönung

Nächtliches Surfen ist mit einem warmen, gedämpften Overlay angenehmer für die Augen. Dieses injiziert CSS aus JS, sodass es bedingt sein kann — eine reine CSS-Regel könnte die Stunde nicht prüfen.

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

Das Overlay nutzt pointer-events: none, sodass es nie Klicks blockiert, und mix-blend-mode: multiply, sodass es Farben wärmt, statt sie nur einzunebeln. Wende es mit einem breiten URL-Muster für einen seitenweiten Nachtmodus an.

Rezept 3 — ein Layout nur am Wochenende

Vielleicht sollte ein Arbeits-Dashboard am Samstag und Sonntag ruhiger aussehen — breitere Ränder, gedämpfte Farben, keine dringlich-roten Abzeichen. Kombiniere das URL-Muster (das Dashboard) mit einer Wochenend-Prüfung.

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

An Wochentagen kehrt der Guard zurück und das Dashboard ist sein normales Selbst. Das ist der sauberste Weg, einen „Wochenendmodus" zu bekommen, ohne zwei Regeln zu pflegen.

Rezept 4 — nach 18 Uhr Arbeitswerkzeuge verstecken

Die Umkehrung des Fokusmodus: Entmutige am Abend sanft das Öffnen von Arbeits-Apps. Grenze die Regel auf deine Arbeitswerkzeuge ab und prüfe das Abendfenster.

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

Ein sanfter Anstoß — ein Banner und eine leichte Entsättigung — statt einer harten Sperre. Passe es nach Geschmack an; die Struktur ist identisch mit den anderen.

Zeit mit URL-Mustern kombinieren

Die zwei Schichten setzen sich natürlich zusammen:

Du kannst es auch nach Minute für feinere Kontrolle absichern (getMinutes()) oder nach Datum für eine „bis Monatsende"-Regel (getDate(), getMonth()).

Dinge, die du im Kopf behalten solltest

Siehe auch

Regeln greifen bei einer URL, aber JavaScript besitzt die Uhr — und das ist alles, was du für Fokusmodi, Nachttönungen und Wochenend-Layouts brauchst. Installiere JustZix und lass deine Regeln die Zeit ansagen.

javascriptrulesworkflow

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Siehe auch

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle