Semplice Countdown Timer per una pagina web in JavaScript

Recentemente avevo cercato un contatore alla rovescia su JavaScript per una landing pagina per promuovere un prodotto, ma il più interessanti sono o a pagamento o non mi andavano bene ma alla fine ho trovato uno molto leggero e funzionante. Quindi vorrei condividere con voi questa scoperta magari a qualcuno sarà utile.

Timer Countdown per il tuo sito web

La funzione counDown() fa partire il conto alla rovescia del taimer, che scala il tempo rimasto dalla data attuale alla data impostata e specificata nei parametri. L'ordine dei parametri è la seguente: secondi,  minuto,ora, giorno, mese, anno. Se alcuni dei parametri non sono specificati sarà preso in considerazione il tempo corrente. Se indicare un solo parametro tipo 450 , il timer interpreterà questo valore come tempo in SECONDI impostato alla scadenza .

Il codice java script  è piuttosto semplice  :

 

<script language="javascript" type="text/javascript">
function countDown(second,endMinute,endHour,endDay,endMonth,endYear) {
var now = new Date();
second = (arguments.length == 1) ? second + now.getSeconds() : second;
endYear =  typeof(endYear) != 'undefined' ?  endYear : now.getFullYear();            
endMonth = endMonth ? endMonth - 1 : now.getMonth();  //numero del mese cominciando da 0 esempio 03- marzo 
endDay = typeof(endDay) != 'undefined' ? endDay :  now.getDate();    
endHour = typeof(endHour) != 'undefined' ?  endHour : now.getHours();
endMinute = typeof(endMinute) != 'undefined' ? endMinute : now.getMinutes();  
//agiungiamo un secondo alla data finale (il nostro taimer mostrera tempo gia dopo 1 secondo.)
var endDate = new Date(endYear,endMonth,endDay,endHour,endMinute,second+1);
var interval = setInterval(function() { //faciamo partire taimer con intervallo di 1 secondo  
    var time = endDate.getTime() - now.getTime();
    if (time < 0) {                      //se la data finale impostata è meno di 1 secondo
        clearInterval(interval);
        alert("La data è sbagliata!");           
    } else {           
        var days = Math.floor(time / 864e5);
        var hours = Math.floor(time / 36e5) % 24;
        var minutes = Math.floor(time / 6e4) % 60;
        var seconds = Math.floor(time / 1e3) % 60; 
        var digit='<div style="width:70px;float:left;text-align:center">'+
        '<div style="font-family:Stencil;font-size:55px;">';// potete cambiare alteza e famiglia di font
        var text='</div><div>'
        var end='</div></div><div style="float:left;font-size:45px;">:</div>'
        document.getElementById('mytimer').innerHTML = '<div>Tempo rimasto: </div>'+// qui indichiamo il nome del nostro timer mytimer come esempio //
        digit+days+text+'Giorni'+end+digit+hours+text+'Ore'+end+
        digit+minutes+text+'Minuti'+end+digit+seconds+text+'Secondi';
        if (!seconds && !minutes && !days && !hours) {             
            clearInterval(interval);
            alert("Tempo scaduto!");             
        }          
    }
    now.setSeconds(now.getSeconds() + 1); //aumentiamo il tempo corrente per 1 secondo
}, 1000);
}
countDown(03,30,06,05,05,2019); //impostiamo timer per ora e la data di scadenza, nel mio esempio per 5 maggio 2019 ore 6 minute 30 e secondi 3   //   </script>
 

Markup HTML del timer

Puoi attribuire proprio stile per le cifre del tuo timer, e come puoi notare il codice html è molto semplie

<div id="mytimer" style="font-size: 17px; color: #333; line-height: 45px;"></div>

Come avete notato dal codice il timer nel mio esempio è inserito in un div con identificatore id="mytimer". Quindi posiamo creare sulla stessa pagina varie timer applicando varie identificatori.

 

Per inserire questo script su una pagina in Joomla dovresti usare un plugin esterno tipo “Sourcerer” che permette esecuzione di jscript, perché da default in Joomla è vietato per motivi di sicurezza esecuzione di codici php, js e inserimento diretto del tag html su un articolo. Altrimenti traverso un semplice commento sotto articolo si potrebbe entrare al interno del sito e distruggerlo.

Letto 1744 volte