← 全部文章

指南

给任何页面添加阅读时间和字数徽章

17 5月 2026 · 作者 JustZix Team

在你投入一篇文章之前,知道这份投入的规模会有帮助。这是三分钟的速览还是二十分钟的深度阅读?许多网站不说。用一小段 JustZix JavaScript 规则,你可以自己给每个页面添加一个阅读时间和字数徽章。

阅读时间是如何估算的

标准方法很简单:数一数文章里的字数,然后除以平均阅读速度。大多数估算对在线散文的成年读者使用每分钟 200 到 250 个词。我们将使用 220 作为合理的中间值。它永远不会精确,但能给出有用的规模感。

计数脚本

这段代码找到主文章、数它的字数并计算分钟数。把它粘贴进 JustZix 规则的 JS 面板:

function countArticle() {
  var el = document.querySelector('article, main, .post-content');
  if (!el) return null;
  var text = el.innerText || '';
  var words = text.trim().split(/\s+/).filter(Boolean).length;
  var minutes = Math.max(1, Math.round(words / 220));
  return { words: words, minutes: minutes };
}

正则表达式 /\s+/ 在任何一连串空白处分割,而 filter(Boolean) 丢弃空条目,这样计数才干净。

绘制徽章

现在构建一个小的浮动元素并把它放在视口的一角:

function showBadge(stats) {
  if (!stats) return;
  var b = document.createElement('div');
  b.id = 'jz-read-badge';
  b.textContent = stats.minutes + ' min read · '
    + stats.words.toLocaleString() + ' words';
  b.style.cssText = [
    'position:fixed', 'bottom:16px', 'right:16px',
    'z-index:99999', 'padding:8px 14px',
    'background:#2b2620', 'color:#f4ecd8',
    'font:13px/1 system-ui, sans-serif',
    'border-radius:20px', 'box-shadow:0 2px 8px rgba(0,0,0,.3)'
  ].join(';');
  document.body.appendChild(b);
}

var stats = countArticle();
showBadge(stats);

徽章固定在右下角,所以它在你滚动时保持可见,又不遮挡文本。

随滚动更新进度

你可以通过显示还剩多少,让徽章变成实时的。添加一个根据位置重新计算的滚动监听器:

window.addEventListener('scroll', function () {
  var badge = document.getElementById('jz-read-badge');
  if (!badge || !stats) return;
  var max = document.body.scrollHeight - window.innerHeight;
  var ratio = max > 0 ? window.scrollY / max : 1;
  var left = Math.max(0, Math.round(stats.minutes * (1 - ratio)));
  badge.textContent = left + ' min left · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

{ passive: true } 选项告诉浏览器该监听器不会阻塞滚动,让页面保持顺滑。

处理延迟加载的页面

有些网站在初次加载之后才渲染文章。如果徽章显示零字数,就把计数稍微延迟:

setTimeout(function () {
  if (!document.getElementById('jz-read-badge')) {
    showBadge(countArticle());
  }
}, 1200);

把它做成一条规则

新建一条 JustZix 规则,把 URL 模式设为你想要徽章的网站,并把计数、徽章和滚动块粘贴进 JS 面板。保存并重新加载——角落里一个整洁的药丸标签现在告诉你将面对什么,以及你已经走了多远。

阅读徽章与平静的布局自然搭配。把它与隐藏的侧边栏和温暖的背景组合,形成一套专注的阅读设置。浏览我们的现成示例获取更多 JS 配方,并下载 JustZix,今天就添加这个徽章。