基于时间的规则：专注模式、夜间色调和周末布局
JustZix 里的一条规则按 URL 模式匹配 —— 当地址栏匹配时它就触发,仅此而已。没有「仅工作日」开关,没有日程字段。但也不需要有:规则主体是 JavaScript,而 JavaScript 能读时钟。本指南介绍如何让单独一条规则在工作时段是一种表现、在夜里、周末或下午 6 点后是另一种表现 —— 全靠几行日期逻辑。
为什么时间是一个 JS 端的检查
这是关键的心智模型:规则按 URL 匹配,JavaScript 决定时间。规则的 URL 模式控制脚本在哪里运行;脚本顶部的一次时间检查控制它是否做事。规则仍然在每个匹配的页面上注入 —— 它只是在时钟这么说时提前退出。一旦这一点理解了,下面每个例子都是同一个形状:读 new Date(),比较,然后要么行动要么 return。
读时钟
一切都从 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();
})();每个让你分心的东西做一条这样的规则,或在一个专用文件夹里用一个宽泛的模式。在朝九晚五之外,守卫失败,站点完全正常 —— 没有永久封锁,没有要禁用的单独应用。
配方 2 —— 暖色夜间色调
深夜浏览用一个暖色、调暗的浮层会更护眼。这一个从 JS 注入 CSS,这样它能是有条件的 —— 一条纯 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);
})();在工作日守卫 return,仪表盘是它正常的样子。这是不维护两条规则就能得到一个「周末模式」的最干净方式。
配方 4 —— 下午 6 点后,隐藏工作工具
专注模式的反面:在傍晚,温和地劝阻打开工作应用。把规则限定到你的工作工具,并检查傍晚的时间窗。
(() => {
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是最容易引入 bug 的地方。 - 让效果可逆 —— 优先加一个浮层或一个样式元素,而不是摧毁 DOM,除非硬封锁正是要点。
另见
- 禁用暗黑模式与虚假紧迫感 —— 更多重塑站点行为的 JS 规则。
- 一个响应式调试浮层 —— 另一个实用的注入式 JavaScript 工具。
规则按 URL 匹配,但 JavaScript 掌管时钟 —— 而这就是你做专注模式、夜间色调和周末布局所需要的全部。安装 JustZix,让你的规则报时。
为这篇文章评分
暂无评分 — 成为第一个。