← Все статьи

Гайды

Добавьте значки времени чтения и счётчика слов на любую страницу

17 мая 2026 · автор JustZix Team

Прежде чем взяться за статью, полезно знать размер обязательства. Это трёхминутное беглое чтение или двадцатиминутное глубокое погружение? Многие сайты не говорят. С небольшим JavaScript-правилом JustZix вы можете сами добавить значок времени чтения и счётчика слов на каждую страницу.

Как оценивается время чтения

Стандартный метод прост: посчитать слова в статье, затем разделить на среднюю скорость чтения. Большинство оценок используют 200–250 слов в минуту для взрослых читателей онлайн-прозы. Мы возьмём 220 как разумную середину. Это никогда не будет точным, но даёт полезное ощущение масштаба.

Скрипт подсчёта

Этот сниппет находит основную статью, считает её слова и вычисляет минуты. Вставьте его в панель JS правила JustZix:

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 + ' мин чтения · '
    + stats.words.toLocaleString() + ' слов';
  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 + ' мин осталось · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

Опция { passive: true } говорит браузеру, что слушатель не будет блокировать прокрутку, сохраняя страницу плавной.

Обработка страниц, загружающихся поздно

Некоторые сайты отрисовывают статью после первоначальной загрузки. Если значок показывает ноль слов, слегка задержите подсчёт:

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

Сделайте это правилом

Создайте правило JustZix, задайте шаблон URL для сайтов, где вам нужен значок, и вставьте блоки подсчёта, значка и прокрутки в панель JS. Сохраните и перезагрузите — аккуратная пилюля в углу теперь говорит вам, на что вы идёте и как далеко продвинулись.

Значок чтения естественно сочетается со спокойной вёрсткой. Сочетайте его со скрытыми боковыми панелями и тёплым фоном ради сосредоточенной обстановки для чтения. Просмотрите наши готовые примеры за другими JS-рецептами и скачайте JustZix, чтобы добавить значок сегодня.