← Tutti gli articoli

Guide

Aggiungi badge di tempo di lettura e conteggio parole a qualsiasi pagina

17 maggio 2026 · di JustZix Team

Prima di impegnarti in un articolo aiuta conoscere la dimensione dell'impegno. È una scorsa di tre minuti o un'immersione profonda di venti? Molti siti non lo dicono. Con una piccola regola JavaScript JustZix puoi aggiungere tu stesso un badge di tempo di lettura e conteggio parole a ogni pagina.

Come si stima il tempo di lettura

Il metodo standard è semplice: conta le parole nell'articolo, poi dividi per una velocità di lettura media. La maggior parte delle stime usa da 200 a 250 parole al minuto per lettori adulti di prosa online. Useremo 220 come ragionevole via di mezzo. Non sarà mai esatto, ma dà un utile senso della scala.

Lo script di conteggio

Questo snippet trova l'articolo principale, conta le sue parole e calcola i minuti. Incollalo nel pannello JS di una regola 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 };
}

L'espressione regolare /\s+/ divide su qualsiasi sequenza di spazi bianchi, e filter(Boolean) scarta le voci vuote così il conteggio è pulito.

Disegnare il badge

Ora costruisci un piccolo elemento flottante e posizionalo in un angolo del viewport:

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

Il badge è fissato all'angolo in basso a destra così resta visibile mentre scrolli senza coprire il testo.

Aggiornare il progresso mentre scrolli

Puoi rendere il badge dinamico mostrando quanto manca. Aggiungi un ascoltatore di scroll che ricalcola in base alla posizione:

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

L'opzione { passive: true } dice al browser che l'ascoltatore non bloccherà lo scorrimento, mantenendo la pagina fluida.

Gestire pagine che si caricano in ritardo

Alcuni siti renderizzano l'articolo dopo il caricamento iniziale. Se il badge mostra zero parole, ritarda leggermente il conteggio:

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

Rendila una regola

Crea una regola JustZix, imposta il pattern URL sui siti dove vuoi il badge, e incolla i blocchi di conteggio, badge e scroll nel pannello JS. Salva e ricarica — una pillola ordinata nell'angolo ora ti dice cosa ti aspetta e quanta strada hai fatto.

Un badge di lettura si abbina naturalmente con un layout tranquillo. Combinalo con barre laterali nascoste e uno sfondo caldo per una configurazione di lettura concentrata. Sfoglia i nostri esempi pronti all'uso per altre ricette JS, e scarica JustZix per aggiungere il badge oggi.