Timer conto alla rovescia in jQuery nel detaglio con azione finale per un sito web.

Come penso avete notato varie contatori alla rovescia sono molto popolari non solo in mondo reale in vari film ma anche nel mondo virtuale (secondo me anche di piu ) per creare vari promozioni e spingere visitatori verso partecipazione o aquisto. Scadenza del templo o limiti sempre nel senso del tempo collegati a saldi o ad una offerta influiscono psicologicamente tanto su una persona nel prendere decisione di acquistare o aderire. E quindi noi in questo articolo vediamo come realizzare un contatore alla rovescia su una pagina web del nostro sito.

Contatore alla rovescia in una pagina web

Grandi numeri che indicano il tempo che inesorabilmente sfugge, diventa un ulteriore e grande stimolo per  partecipare in un evento pubblicizzato sul tuo sito web.  Non manchera  anche una  azione finale.  Alla fine del conteggio alla rovescia viene rimosso il link che porta sulla pagina con la nostra grande offerta e appare un altro testo. Tutto questo è possibile realizzare con il nostro contatore alla rovescia presentato oggi.

settimane
0
0
giorni
0
0
ore
0
0
minute
0
0
secondi
0
0

In questa lezione faremo una pagina web con il contatore alla rovescia in base di jQuery Plugin CountDown.  Nel fil di origine sono inclusi due pagine HTML di esempio con contatori alla rovescia diversi per coloro (in versione chiara e scura).

Per inserire il nostro timer in una pagina web, useremo markup html come mostrato sotto :

<!-- inizio pannello contatore  -->
<div id="countdown_dashboard">
    <div class="dash weeks_dash">
        <span class="dash_title">settimane</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>    <div class="dash days_dash">
        <span class="dash_title">giorni</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>    <div class="dash hours_dash">
        <span class="dash_title">ore</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>    <div class="dash minutes_dash">
        <span class="dash_title">minute</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>    <div class="dash seconds_dash">
        <span class="dash_title">secondi</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div></div>
<!-- Fine contatore -->

Per ogni parte del contatore abbiamo tre elementi nel contenitore <div>: nome e due cifre. E tutte le parti sono inseriti in un unico contenitore comune rachiuso nella scatola piu grande creata con un altro  tag <div></div>.

Per gli elementi del contatore dobbiamo inventare delle regole  CSS per stilizarli. Ecco un esempio della  variante scura (stili per la versione light puoi trovarli nel fail da scaricare sotto  ):

Cliccare per aprire lo spoiler e vedere il codice

#countdown_dashboard {
    height: 96px;
    margin-left: 125px;
}.dash {
    width: 138px;
    height: 96px;
    background: transparent url('../images/dash.png') 0 0 no-repeat;
    float: left;
    margin-left: 2px;
    padding-left: 13px;
    position: relative;
    color: #333;
}.weeks_dash {
    background: transparent url('../images/dark_weeks_dash.png') 0 0 no-repeat;
}.days_dash {
    background: transparent url('../images/dark_days_dash.png') 0 0 no-repeat;
}.hours_dash {
    clear: left;
    background: transparent url('../images/dark_hours_dash.png') 0 0 no-repeat;
}.minutes_dash {
    background: transparent url('../images/dark_minutes_dash.png') 0 0 no-repeat;
}.seconds_dash {
    background: transparent url('../images/dark_seconds_dash.png') 0 0 no-repeat;
}.dash .digit {
    font: bold 52pt Verdana;
    font-weight: bold;
    float: left;
    width: 59px;
    text-align: center;
    position: relative;
}.dash_title {
    display: none;
}

Gestione del contatore con jQuery

Per ogni parte del contatore viene impostato il proprio sfondo, in accordo con le idee di progettazione.Ora il blocco del contatore  è pronto e dobbiamo quindi far lo funzionare. Collegiamo i file necessari della  libreria jQuery e il plugin citato sopra

<script language="Javascript" type="text/javascript" src="/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="/js/jquery.lwtCountdown-0.9.5.js"></script>

Impostare il tempo di scadenza

Per impostare contatore alla rovescia, abbiamo due opzioni: partendo dal momento attuale.

// Impostare  timer indicando il tempo da scorrere partendo dal momento attuale
jQuery(document).ready(function() {
    $('#countdown_dashboard').setCountDown({
        targetOffset: {
            'day':         1,    //giorni 
            'month':     1,    //mesi
            'year':     0,    //anni
            'hour':     1,    //ore
            'min':         1,    //minute
            'sec':         1    //secondi
        }
    });
});

Oppure  specificando il valore assoluto del tempo, data e ora di scadenza.

// Impostazioni del taimer sul valore assoluto del tempo
jQuery(document).ready(function() {    $('#countdown_dashboard').setCountDown({
        targetDate: {
            'day':         15,    //giono del mese
            'month':     1,    //mese
            'year':     2011,    //anno
            'hour':     12,    //ora
            'min':         0,    //minute
            'sec':         0    //secondi
        }
    });
});

Come eseguire una azione alla fine del tempo scaduto

Dopo l'inizializzazione, inizia il conto alla rovescia. Al raggiungimento di zero il contatore  ferma il conteggio e genera l'evento onComplete per il quale è possibile predefinire una funzione che compierà una azione necessaria.

// Impostiamo timer per 5 secondi  
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetOffset: {
            'day':         0,
            'month':     0,
            'year':     0,
            'hour':     0,
            'min':         0,
            'sec':         5
        }, 
        // Alla fine del conteggio appare panello  #complete_info_message
        onComplete: function() { $('#complete_info_message').slideDown() }
    });
});

Possiamo eliminare visualizzazione quantità settimane :

// Impostazioni del contatore
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetOffset: {
            'day':         0,
            'month':     0,
            'year':     1,
            'hour':     0,
            'min':         0,
            'sec':         3
        },
        omitWeeks: true    // Eliminare visualizzare quantità settimane  
    });
});

Il conto alla rovescia si possa  fermare, proseguire o ripristinare al valore desiderato:

// Impostazioni contatore
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetOffset: {
            'day':         1,
            'month':     1,
            'year':     0,
            'hour':     1,
            'min':         1,
            'sec':         1
        }
    });
});// Fermare contatore
function stop() {
    $('#countdown_dashboard').stopCountDown();
}// Far partire contatore
function start() {
    $('#countdown_dashboard').startCountDown();
}
// Reset contatore
function reset() {
    $('#countdown_dashboard').stopCountDown();
    $('#countdown_dashboard').setCountDown({
        targetOffset: {
            'day':         1,
            'month':     1,
            'year':     0,
            'hour':     1,
            'min':         1,
            'sec':         1
        }
    });                
    $('#countdown_dashboard').startCountDown();
}

Come inserire tanti contatori alla rovescia in una sola pagina web

in una stessa pagina posiamo inserire varie contatori :

jQuery(document).ready(function() {
    // Impostimo il primo contatore
    $('#countdown_dashboard').countDown({
        targetOffset: {
            'day':         1,
            'month':     1,
            'year':     0,
            'hour':     1,
            'min':         1,
            'sec':         5
        }
    });    // Impostiamo il secondo contatore
    $('#countdown_dashboard2').countDown({
        targetOffset: {
            'day':         10,
            'month':     1,
            'year':     0,
            'hour':     6,
            'min':         34,
            'sec':         10
        }
    });
});

Nei contatori posiamo anche utilizzare  UTC (Coordinated Universal Time), indicando chiaramente l'opzione speciale:

// Inizializzazione del contatore
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetDate: {
            'day':         17,
            'month':     12,
            'year':     2010,
            'hour':     01,
            'min':         0,
            'sec':         0,
            // Utilizzo del tempo UTC
            'utc':        true
        }
    });
});

Al interno del  evento onComplete puoi indicare tutte le azioni che devono essere fatti alla fine del conteggio. Ad esempio, gli elementi del contatore e il link alla pagina con la proposta  vengono ellimitati alla scadenza  e viene mostrato invece avviso che tempo e scaduto azione è finita. Oppure vediamo qui sotto un semplice esempio  di evento onComplet impostato sul mostrare una frase alla fine dle conteggio.

Ricarica la pagina se il contatore è gia fermo perche lo impostato su 1 minuto e 15 secondi

PRESTO SI APRIRA
IL NOSTRO MANIFICO RISTORANTE...

Rimani con noi. Vinci il pasto gartuito per tutto l'anno!

settimane
0
0
giorni
0
0
ore
0
0
minute
0
0
secondi
0
0

Aspetta la fine del conteggio per vedere messagio che appare dopo la fine!

 

 
 
 
 
Letto 2148 volte