Gli script per la gestione di countdown sono utilizzati per mostrare all’utente il tempo rimanente prima di un’attività o un evento. Spesso vengono utilizzati in siti web di e-commerce, eventi sportivi, aste online e in molti altri contesti in cui il fattore tempo è determinante. In questa raccolta abbiamo selezionato diversi codici Javascript pronti all’uso per la gestione dei conti alla rovescia, ognuno con diverse funzionalità e aspetto grafico.
Quando può essere utile implementare un conto alla rovescia?
Ci sono molti casi in cui può essere utile implementare un conto alla rovescia all’interno di una pagina web. Ecco alcuni esempi:
Eventi e scadenze – se stai organizzando un evento o hai una scadenza imminente per un’attività, un conto alla rovescia visibile sulla pagina web può aiutare a tenere traccia del tempo rimanente. Ad esempio, se stai organizzando un concerto, puoi mostrare il tempo rimanente fino all’inizio dell’evento.
Aste online – se hai organizzato un’asta online, un conto alla rovescia può invogliare i partecipanti ad assumere decisioni rapide sulle offerte.
Offerte speciali e promozioni – se stai offrendo prodotti o servizi in promozione per un periodo limitato, un conto alla rovescia può aiutare a creare un senso di urgenza e spingere i visitatori del sito a fare acquisti prima della fine dell’offerta.
In generale, un conto alla rovescia può essere utile in qualsiasi situazione in cui il tempo è un fattore critico. Implementare un countdown in pagina può aplificare l’attesa per un evento o creare un senso di urgenza e spingere gli utenti a compiere un’azione (ad esempio un acquisto o una registrazione). In questa raccolta potete scegliere tra diversi Javascript da implementare nel vostro sito web per creare un effetto conto alla rovescia per gli usi più disparati.
Le nostre scelte
Modern Countdown
Un conto alla rovescia realizzato in HTML e Javascript. Il vero punto di forza di questo script, tuttavia, non è il codice Javascript ma la stilizzazione CSS che conferisce davvero un bel aspetto a questo countdown.
Un conto alla rovescia realizzato in HTMl e Javascript. La grafica è piuttosto spartana, ma può essere un punto di forza se si è in cerca di un countdown da personalizzare graficamente.
Una libreria Javascript che consente di effettuare il calcolo del tempo mancante ad una data futuro, consentendo di implementare un conto alla rovescia.
Un bel esempio di countdown in HTML, CSS e Javascript. Lo script segnala quanti giorni, ore, minuti e secondi mancano ad una determinata scadenza. Il conto alla rovescia si aggiorna in tempo reale.
Un semplice Javascript che mostra come creare un conto allo rovescia dei giorni, ore, minuti e secondi che mancano ad una certa data. L’autore dello script ha anche pubblicato un video (della durata di circa 15 minuti) in cui spiega come lo ha realizzato.
Un semplice esempio di come realizzare un conto alla rovescia verso una certa data. Utile, ad esempio, per segnalare sul sito la scadenza di una promozione o l’inizio di un evento.
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).
Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicità
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 181 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":"\u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E\u003Cstyle\u003E.cl-consent-settings{position:fixed;left:16px;bottom:calc(28px + var(--__lxG___css_var_privacy_icon_auto, 0px));z-index:100;transition:all 0.15s ease-in-out;transform:translateY(0)}.cl-consent-settings--is-hidden{transform:translateY(70px);opacity:0}.cl-consent-settings__hint{border-radius:4px;background:#282A3C;box-shadow:0 4px 24px 0 rgba(0,0,0,.15);color:#FFFCF2;position:absolute;right:-195px;top:0;bottom:0;margin:auto;height:40px;width:175px;display:flex;align-items:center;justify-content:center;padding:4px 12px;font-size:12px;font-weight:400;line-height:16px;cursor:default;user-select:none;transition:transform 0.3s ease,opacity 0.3s ease;transform:translateX(-22px);opacity:0;pointer-events:none;z-index:-1}.cl-consent-settings__hint::after{content:\u0022\u0022;position:absolute;left:-16px;top:0;bottom:0;margin:auto;width:0;height:0;border:0 solid transparent;border-top-width:12px;border-bottom-width:12px;border-right:16px solid #282A3C}.cl-consent-settings__btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:#4b81e8!important;background-position:center center;background-size:30px 30px;background-repeat:no-repeat;box-shadow:0 0 20px 0 rgba(0,0,0,.35);z-index:70;position:relative;text-decoration:none;cursor:pointer}.cl-consent-settings__btn::before{content:\u0022\u0022;-webkit-mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);background-color:#ffffff!important;mask-repeat:no-repeat;width:30px;height:30px}.cl-consent-settings__btn:hover+.cl-consent-settings__hint{transform:translateX(0);pointer-events:all;opacity:1}.cl-consent-settings__user{width:18px;height:18px;border-radius:50%;padding:0;border:1px solid #fff;background-color:#00AD98;background-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022);background-position:center center;background-size:9px 10px;background-repeat:no-repeat;z-index:75;position:absolute;top:-2px;right:-8px;text-decoration:none;visibility:hidden}\u003C\/style\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022 onclick=\u0022if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert(\u0027This function only for users from European Economic Area (EEA)\u0027)} return false\u0022\u003E\u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E\u003C\/button\u003E\u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EPrivacy and cookie settings\u003C\/div\u003E\u003C\/div\u003E","pricds":"show_in_the_footer","pricaa":1,"vcnt":181,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di %sp3_retention% nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura %DURATION%","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}