← 全部文章

教程

在任何页面上显示字数和阅读时间

15 5月 2026 · 作者 JustZix Team

这篇文章要花多久 —— 两分钟还是二十分钟？大多数页面不告诉你。这条规则在每篇文章顶部加一个小栏：字数和估计的阅读时间。

规则

规则的 JavaScript，URL 模式设到一个博客或你常读的网站：

const art = document.querySelector('article, main, .entry-content');
if (art) {
  const words = art.innerText.trim().split(/\s+/).length;
  const min = Math.max(1, Math.round(words / 200));
  const bar = document.createElement('div');
  bar.textContent = words + ' 个词 · ~' + min + ' 分钟阅读';
  bar.style.cssText =
    'position:sticky;top:0;z-index:9999;padding:6px 12px;' +
    'background:#1f2937;color:#fff;font:13px/1.4 system-ui;' +
    'text-align:center';
  art.prepend(bar);
}

它如何工作

数词

art.innerText 是文章的可见文本（不带 HTML 标签）。split(/\s+/) 在每串空白处切开它 —— 数组的长度就是词数。简单且足够准确。

每分钟 200 词

带理解的平均阅读速度是每分钟 200-250 词。我们取 200 作为一个保守的折中；Math.max(1, ...) 防止一段短文本显示「0 分钟」。

一条粘性栏

position: sticky; top: 0 让栏在你滚动文章时保持可见 —— 一小条信息，始终触手可及。

变体 —— 一条阅读进度条

想看文章还剩多少？在顶部加一条随滚动增长的细条：

const p = document.createElement('div');
p.style.cssText =
  'position:fixed;top:0;left:0;height:3px;z-index:99999;' +
  'background:#14b8a6;width:0';
document.body.appendChild(p);
addEventListener('scroll', () => {
  const h = document.body.scrollHeight - innerHeight;
  p.style.width = (scrollY / h * 100) + '%';
});

坑

• 它也数图说和代码。innerText 包含容器里的一切 —— 包括代码块。对一篇典型文章来说差别可以忽略。
• 容器的选择。如果计数器显示一个荒唐的数字，querySelector 命中了一个太宽泛的元素 —— 收窄选择器。

另见

• 示例 —— 更多开箱即用的规则
• 阅读模式 —— 把文章读到底的舒适
• Web Vitals 监视器 —— 页面上的另一条信息栏

安装 JustZix —— 提前知道你将面对什么。