FR

← Tous les articles

Guides

Règles basées sur le temps : mode focus, teinte nocturne et mises en page de week-end

· par JustZix Team

Une règle dans JustZix correspond à un motif d'URL — elle se déclenche quand la barre d'adresse correspond, et c'est tout. Il n'y a pas d'interrupteur « seulement en semaine », pas de champ de planification. Mais il n'en faut pas un : le corps de la règle est du JavaScript, et le JavaScript peut lire l'horloge. Ce guide montre comment faire en sorte qu'une seule règle se comporte d'une façon pendant les heures de travail et d'une autre la nuit, le week-end, ou après 18h — le tout avec quelques lignes de logique de date.

Pourquoi le temps est une vérification côté JS

Voici le modèle mental clé : les règles correspondent à l'URL, le JavaScript décide du temps. Le motif d'URL de la règle contrôle où le script s'exécute ; une vérification de temps en haut du script contrôle s'il fait quelque chose. La règle s'injecte toujours sur chaque page correspondante — elle sort juste tôt quand l'horloge le dit. Une fois que cela fait tilt, chaque exemple ci-dessous a la même forme : lire new Date(), comparer, puis soit agir, soit retourner.

Lire l'horloge

Tout commence par new Date(), qui vous donne l'heure locale actuelle dans le navigateur. Les deux méthodes dont vous avez le plus besoin :

const now = new Date();

const hour = now.getHours();      // 0-23, heure locale
const day  = now.getDay();        // 0 = dimanche ... 6 = samedi

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

Notez que getHours() est local à la machine de l'utilisateur, ce qui est exactement ce que vous voulez pour « mes heures de travail ». Et la vérification de nuit utilise || car la plage passe minuit — un piège classique d'erreur de un.

Le motif de garde

Chaque règle basée sur le temps suit le même gabarit : calculer une condition, et return immédiatement si elle n'est pas remplie. Enveloppez-la dans une IIFE pour que le return précoce soit légal.

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

  // Ne fait quelque chose que pendant les heures de travail
  if (!(hour >= 9 && hour < 17)) return;

  // ...l'effet reel de la regle vient ici...
})();

C'est toute l'astuce. Le script s'exécute toujours ; la garde décide si le corps s'exécute. Tout ce qui suit ne change que la condition et le corps.

Recette 1 — mode focus pendant les heures de travail

Ciblez une règle sur les sites qui dévorent votre journée — réseaux sociaux, actualités, vidéo — avec un motif d'URL, puis faites en sorte que le script vide la page pendant les heures de travail avec un message poli.

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

  // Empeche la page de faire autre chose
  window.stop();
})();

Créez une telle règle par distraction, ou utilisez un motif large dans un dossier dédié. En dehors de 9h-17h, la garde échoue et le site est complètement normal — pas de blocage permanent, pas d'application séparée à désactiver.

Recette 2 — teinte chaude nocturne

La navigation tard le soir est plus reposante pour les yeux avec une surcouche chaude et atténuée. Celle-ci injecte du CSS depuis du JS pour qu'elle puisse être conditionnelle — une simple règle CSS ne pourrait pas vérifier l'heure.

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

  // Attenue aussi un peu la luminosite globale
  document.documentElement.style.filter = 'brightness(0.9)';
})();

La surcouche utilise pointer-events: none pour ne jamais bloquer les clics, et mix-blend-mode: multiply pour réchauffer les couleurs plutôt que de simplement les embrumer. Appliquez-la avec un motif d'URL large pour un mode nuit à l'échelle du site.

Recette 3 — une mise en page réservée au week-end

Peut-être qu'un tableau de bord de travail devrait avoir l'air plus calme le samedi et le dimanche — marges plus larges, couleurs atténuées, pas de badges rouge urgent. Combinez le motif d'URL (le tableau de bord) avec une vérification de week-end.

(() => {
  const day = new Date().getDay();
  if (day !== 0 && day !== 6) return;   // en semaine : ne fait rien

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

En semaine, la garde retourne et le tableau de bord est lui-même normalement. C'est la façon la plus propre d'obtenir un « mode week-end » sans maintenir deux règles.

Recette 4 — après 18h, masquer les outils de travail

L'inverse du mode focus : le soir, décourager doucement l'ouverture des applications de travail. Ciblez la règle sur vos outils de travail et vérifiez la fenêtre du soir.

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

  // Apres 18:00, ou n'importe quand le week-end
  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 coup de pouce doux — une bannière et une légère désaturation — plutôt qu'un blocage dur. Ajustez selon le goût ; la structure est identique aux autres.

Combiner le temps avec les motifs d'URL

Les deux couches se composent naturellement :

Vous pouvez aussi le filtrer par minute pour un contrôle plus fin (getMinutes()), ou par date pour une règle « jusqu'à la fin du mois » (getDate(), getMonth()).

Choses à garder à l'esprit

À voir aussi

Les règles correspondent à l'URL, mais le JavaScript possède l'horloge — et c'est tout ce qu'il vous faut pour les modes focus, les teintes nocturnes et les mises en page de week-end. Installez JustZix et laissez vos règles donner l'heure.

javascriptrulesworkflow

Notez cet article

Aucune note — soyez le premier.

Voir aussi

Essayez vous-même

Installez JustZix et collez n'importe quel snippet de cet article. Deux minutes de zéro à une règle fonctionnelle sur tous vos appareils.

Obtenir JustZix

Fonctionnalités · Comment ça marche · Exemples · Cas d'usage