← Wszystkie wpisy

Przewodniki

Dodaj plakietki czasu czytania i liczby słów do dowolnej strony

17 maja 2026 · autor JustZix Team

Zanim zobowiążesz się do artykułu, warto znać rozmiar zobowiązania. Czy to trzyminutowe przejrzenie, czy dwudziestominutowe głębokie zanurzenie? Wiele stron tego nie mówi. Dzięki niewielkiej regule JavaScript JustZix możesz sam dodać plakietkę czasu czytania i liczby słów do każdej strony.

Jak szacuje się czas czytania

Standardowa metoda jest prosta: policz słowa w artykule, a następnie podziel przez średnią prędkość czytania. Większość szacunków używa 200 do 250 słów na minutę dla dorosłych czytelników prozy online. Użyjemy 220 jako rozsądnego środka. Nigdy nie będzie to dokładne, ale daje użyteczne poczucie skali.

Skrypt liczący

Ten fragment znajduje główny artykuł, liczy jego słowa i oblicza minuty. Wklej go do panelu JS reguły 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 };
}

Wyrażenie regularne /\s+/ dzieli na dowolnym ciągu białych znaków, a filter(Boolean) odrzuca puste wpisy, więc liczba jest czysta.

Rysowanie plakietki

Teraz zbuduj niewielki pływający element i umieść go w rogu obszaru widoku:

function showBadge(stats) {
  if (!stats) return;
  var b = document.createElement('div');
  b.id = 'jz-read-badge';
  b.textContent = stats.minutes + ' min czytania · '
    + stats.words.toLocaleString() + ' slow';
  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);

Plakietka jest przypięta do prawego dolnego rogu, więc pozostaje widoczna podczas przewijania, nie zasłaniając tekstu.

Aktualizacja postępu podczas przewijania

Możesz ożywić plakietkę, pokazując, ile zostało. Dodaj nasłuchiwacz przewijania, który przelicza na podstawie pozycji:

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 do konca · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

Opcja { passive: true } mówi przeglądarce, że nasłuchiwacz nie zablokuje przewijania, utrzymując stronę płynną.

Obsługa stron ładujących się z opóźnieniem

Niektóre strony renderują artykuł po pierwszym załadowaniu. Jeśli plakietka pokazuje zero słów, lekko opóźnij liczenie:

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

Zrób z tego regułę

Utwórz regułę JustZix, ustaw wzorzec URL na strony, gdzie chcesz plakietki, i wklej bloki liczenia, plakietki i przewijania do panelu JS. Zapisz i przeładuj — schludna pigułka w rogu mówi ci teraz, na co się piszesz i jak daleko już dotarłeś.

Plakietka czytania naturalnie współgra ze spokojnym układem. Połącz ją z ukrytymi paskami bocznymi i ciepłym tłem, aby uzyskać skupioną konfigurację czytania. Przejrzyj nasze gotowe przykłady, aby zdobyć więcej przepisów JS, i pobierz JustZix, aby dodać plakietkę już dziś.