Generatore di countdown timer: codice HTML e React gratuito, senza registrazione | We.Inc
Crea un countdown timer per il tuo sito web. Imposta data e fuso orario, scegli uno stile e copia HTML semplice o un componente React. Niente account, niente widget di tracciamento, niente script esterni.
Il countdown timer di un sito confronta una scadenza fissa con l'orologio del visitatore una volta al secondo e mostra i giorni, le ore, i minuti e i secondi rimanenti. Imposta qui sotto data, ora e fuso orario, scegli uno stile e copia HTML autonomo o un componente React. Il codice gira sulla tua pagina senza script di terze parti né account.
Due tipi di conto alla rovescia
Tipo
Scadenza
Usalo per
Data fissa
Lo stesso momento per tutti
Lanci, eventi, saldi che terminano a un orario reale
Per visitatore
Un certo numero di ore dopo la prima visita di ciascun visitatore
Offerte di benvenuto che scadono davvero per quella persona
Scegli una data e il fuso orario a cui appartiene la scadenza, uno dei tre stili e un colore d'accento, e guarda il risultato dal vivo qui sotto. L'output è un unico blocco di HTML, CSS e JavaScript, oppure un componente React con classi Tailwind.
Scegli data e ora della scadenza, poi il fuso orario in cui si trova. Il codice salva il momento esatto in UTC, così i visitatori in altri fusi vedono il tempo rimanente corretto.
Oppure passa a un conto alla rovescia per visitatore e indica quante ore ha a disposizione ciascun visitatore.
Scegli uno stile e un colore d'accento e modifica il titolo e il messaggio mostrato quando il tempo scade.
Copia l'embed HTML o il componente React e incollalo dove deve apparire il timer.
Mostra un conto alla rovescia solo per una scadenza reale. I timer che si azzerano o non finiscono mai ingannano i visitatori, e la Federal Trade Commission statunitense include i finti countdown tra le pratiche di design ingannevoli.
Nel messaggio finale spiega cosa succede allo zero, per esempio che i saldi sono finiti o che l'evento è iniziato, con un link al passo successivo.
Il timer usa l'orologio del dispositivo del visitatore. Se quell'orologio è sbagliato lo è anche il countdown, quindi non usarlo mai come unico controllo per una vera scadenza; fai rispettare le scadenze anche sul tuo server.
Escludi gli screen reader dagli aggiornamenti al secondo. Il codice contrassegna il timer con role timer e aria-live off, così non annuncia ogni scatto.
Domande frequenti
Come aggiungo un countdown timer al mio sito web?
Copia l'embed HTML e incollalo nella pagina dove deve comparire il timer. La maggior parte dei website builder ha un blocco HTML o embed proprio per questo. Se il tuo sito è costruito con React, copia invece il componente e renderizzalo come qualsiasi altro componente.
Il timer sarà corretto per i visitatori in altri fusi orari?
Sì. Lo strumento converte la tua data e il tuo fuso orario in un unico momento esatto in UTC e scrive quel numero nel codice. Il browser di ogni visitatore conta alla rovescia verso lo stesso momento, qualunque sia la sua ora locale.
Cosa fa l'opzione per visitatore?
Avvia il conto alla rovescia di ciascun visitatore alla sua prima visita e salva quel momento nel suo browser, così un refresh non lo fa ripartire. Cancellare i dati del sito o cambiare dispositivo ne avvia uno nuovo, quindi usalo solo per offerte che sei disposto a onorare in quel caso.
Posso inserire questo countdown in un'email?
No. I client email non eseguono JavaScript. I countdown nelle email sono immagini animate generate da un server nel momento in cui l'email viene aperta, cosa che una pagina statica non può fornire.
Perché il codice salva l'ora in UTC
Una data come 1 dicembre alle 9:00 indica momenti diversi a Toronto e a Karachi. Salvare la scadenza come timestamp UTC elimina questa ambiguità e gestisce anche i cambi dell'ora legale, perché la conversione usa le regole del fuso che hai scelto per quella data esatta.
Lo script poi sottrae l'ora attuale dalla scadenza a ogni scatto e divide la differenza in giorni, ore, minuti e secondi.
Mantenere il timer preciso e leggero
I browser rallentano i timer nelle schede in background, quindi un countdown che si limita a sottrarre un secondo a ogni scatto accumula errori. Questo codice ricalcola ogni volta partendo dall'orologio e programma l'aggiornamento successivo all'inizio del secondo seguente, così resta corretto quando la scheda torna in primo piano.
Non ci sono librerie né richieste esterne, il che mantiene la pagina veloce ed evita di inviare i dati dei visitatori a un fornitore di widget.