Come creare un countdown

Come creare un countdown personalizzato per festività e eventi con due stili, digitale e con immagine animata, con solo javascript

Ci sono diversi siti specializzati che offrono widget personalizzati che mostrano il numero di giorni, ore, minuti e secondi che mancano allo scoccare di un evento. Si possono creare countdown per Capodanno, per Natale o anche per un compleanno o per un avvenimento sportivo.

Se siete assidui lettori di questo sito avrete capito che a me non piacciono molto le risorse esterne per creare delle personalizzazioni in un sito. Creano un link a un sito che spesso non ha niente a che vedere con il nostro disperdendo page rank, che potrebbe essere impiegato in altro modo.

Abbiamo già visto che si può per esempio creare in proprio un countdown per Natale e Capodanno personalizzando l'immagine dello stesso. Quello stesso codice può essere modificato nella immagine, nel testo e nella data, per creare un countdown adatto a tutte le circostanze.

Se avete un sito e se siete utenti di Blogger, potete andare su Layout -> Aggiungi un gadget -> HTML/Javascript e, in Sezioni del sito, per poi incollare questo codice:

<div align="center">
<div style="color: #003366; font-size: 100%; font-weight:bold; left: 0px; padding: 7px; z-index: 9999;">
<img src="https://lh6.googleusercontent.com/-8tZTBPfD-rU/UqrSq--0PaI/AAAAAAAAlLo/-NxUG6PscwU/s250/buon-anno-250.gif" style="display: block;clear: both;"/>
<div id="contatore_capodanno"></div>
<script language="JavaScript">
var bp_date_target = new Date("January 01, 2020 00:00:00");
var bp_date_now = new Date();
var messaggio_completo = "Auguro a tutti un Buon Anno";
if (bp_date_now >= bp_date_target) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
} else {
bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
if (bp_time_difference <= 0) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
return;
}
bp_count_down_message = "Mancano " + bp_format_seconds(bp_time_difference, 86400, 100000) + " Giorni " + bp_format_seconds(bp_time_difference, 3600, 24) + " Ore " + bp_format_seconds(bp_time_difference, 60, 60) + " Minuti e " + bp_format_seconds(bp_time_difference, 1, 60) + " Secondi" + " a Capodanno!";
document.getElementById("contatore_capodanno").innerHTML = bp_count_down_message;
setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
num = ((Math.floor(secs / num1)) % num2).toString();
if (num.length < 2) s = "0" + num;
return "" + num + "";
}
</script></div></div>

Si salva e si posiziona per poi visualizzare un risultato come questo.

Il testo colorato di blu può essere modificato e si può scegliere data e ora dell'evento, indicandola in stile anglosassone. Per esempio per Capodanno si indica new Date("January 01, 2020 00:00:00"); .

Lo stesso codice può essere usato anche per Natale o per Pasqua modificando la data e il testo. Quando termina il countdown, viene mostrata la scritta messaggio_completo = "Auguro a tutti un Buon Anno"; che ovviamente può essere cambiato se si modifica la tipologia di conto alla rovescia. 

Il tag color: #003366; font-size: 100%; serve per settare colore e dimensione in percentuale dei font della scritta. L'immagine visualizzata sopra al conto alla rovescia è quella indicata nell'URL colorato di rosso.

Si tratta di una immagine animata in formato GIF che può essere sostituita da un'altra, dopo che sia stata caricata online, per esempio creando una Bozza di un post nel nostro account Blogger.

COUNTDOWN DIGITALE

Se si preferisce un Countdown digitale con questo stile

si può usare questo codice

<style>
#stilecountdown {
height: 100px;
width: 220px;
margin: auto;
margin-bottom: 20px;
}
ul.countdown_asp {
margin: 0px;
float: left;
padding: 0px;
}
ul.countdown_asp li {
display: block;
background: #fff url('https://lh3.googleusercontent.com/-aAwkltiWUpI/Uvy_ji20jUI/AAAAAAAAl5I/i1rdo-huzMA/s68/sfondo.png') no-repeat left top!important;
width: 50px;
text-align: center;
position: relative;
float: left;
height: 70px;
margin-left: 5px;
padding: 0px;
}
.timeRefDays, .timeRefMinutes, .timeRefHours, .timeRefSeconds {
width: 52px;
}
ul.countdown_asp li span {
font-size: 22px;
font-weight: bold;
color: #fff;
line-height: 72px;
position: relative;
}
ul.countdown_asp li span::before {content: '';width: 100%;height: 1px;position: absolute;top: 28px}
ul.countdown_asp li p.timeRefDays,
ul.countdown_asp li p.timeRefHours,
ul.countdown_asp li p.timeRefMinutes,
ul.countdown_asp li p.timeRefSeconds {
margin-top: 1em;
color: #444;
text-transform: uppercase;
font-size: 10px;}
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type="text/javascript">
/*<![CDATA[*/
(function(b) {
     function n() {
         var b = document.createElement("canvas");
         return !(!b.getContext || !b.getContext("2d"))
     }
     b.fn.countdown = function(d, p) {
         function q() {
             currentDate = Math.floor(((new Date).getTime() - e.offset) / 1E3);
             f < currentDate ? (null != a.callback && a.callback.call(this), "undefined" != typeof r && clearInterval(r)) : (seconds = f - currentDate, days = Math.floor(seconds / 86400), seconds -= 86400 * days, hours = Math.floor(seconds / 3600), seconds -= 3600 * hours, minutes = Math.floor(seconds / 60), seconds -= 60 * minutes, "knob" != a.skin ? (0 != a.format && (days = 2 <= String(days).length ? days : "0" + days, hours = 2 <= String(hours).length ? hours : "0" + hours, minutes = 2 <= String(minutes).length ? minutes : "0" + minutes, seconds = 2 <= String(seconds).length ? seconds : "0" + seconds), g.text(days), h.text(hours), k.text(minutes), l.text(seconds), 1 == days ? g.parent().children(".timeRefDays").text("GIORNO") : g.parent().children(".timeRefDays").text("GIORNI"), 1 == hours ? h.parent().children(".timeRefHours").text("ORA") : h.parent().children(".timeRefHours").text("ORE"), 1 == minutes ? k.parent().children(".timeRefMinutes").text("MINUTO") : k.parent().children(".timeRefMinutes").text("MINUTI"), 1 == seconds ? l.parent().children(".timeRefSeconds").text("SECONDO") : l.parent().children(".timeRefSeconds").text("SECONDI")) : (g.val(days).trigger("change"), h.val(hours).trigger("change"), k.val(minutes).trigger("change"), l.val(seconds).trigger("change")))
         }
         var a = {
             skin: "countdown_asp",
             fallbackSkin: "countdown_asp",
             option: {
                 day: {
                     max: null,
                     eClass: "days"
                 },
                 hour: {
                     max: 23,
                     eClass: "hours"
                 },
                 minute: {
                     max: 59,
                     eClass: "minutes"
                 },
                 second: {
                     max: 59,
                     eClass: "seconds"
                 }
             },
             dateStart: null,
             dateEnd: null,
             format: !0,
             callback: null
         }, e = {
                 timezone: !1,
                 offset: 0
             };
         d && b.extend(!0, a, d);
         p && b.extend(!0, e, p);
         var f = (new Date(a.dateEnd)).getTime() / 1E3,
             m = (new Date(a.dateStart)).getTime() / 1E3,
             c = (new Date).getTime();
         if (isNaN(f)) alert("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00"), b(this).append("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00");
         else if ("knob" != a.skin || null != m && !isNaN(m))
             if (m > c) alert("Data precedente alla data corrente"), b(this).append("Data evento precedente alla data corrente");
             else {
                 !0 == e.timezone && (e.offset = 36E5 * parseInt(e.offset) + 6E4 * (new Date).getTimezoneOffset());
                 c = b(this);
                 "undefined" != typeof d.option && "undefined" == typeof d.option.global && (d.option.global = {});
                 a.option.day = b.extend(!0, {}, a.option.global, a.option.day);
                 a.option.hour = b.extend(!0, {}, a.option.global, a.option.hour);
                 a.option.minute = b.extend(!0, {}, a.option.global, a.option.minute);
                 a.option.second = b.extend(!0, {}, a.option.global, a.option.second);
                 "knob" == a.skin.toLowerCase() && n ? (a.skin = a.skin.toLowerCase(), c.append('<input class="' + a.option.day.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.hour.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.minute.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.second.eClass + '" type="text" value="0" data-readonly="true" />'), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."), a.option.day.max = Math.floor((f - m) / 86400), c.find(a.option.day.eClass).knob(a.option.day), c.find(a.option.hour.eClass).knob(a.option.hour), c.find(a.option.minute.eClass).knob(a.option.minute), c.find(a.option.second.eClass).knob(a.option.second)) : ("knob" == a.skin.toLowerCase() || n ? c.append('<ul class="' + a.skin + '" ><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>') : (a.skin = a.fallbackSkin, c.html('<ul class="' + a.skin + '"><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>')), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."));
                 var g = c.find(a.option.day.eClass),
                     h = c.find(a.option.hour.eClass),
                     k = c.find(a.option.minute.eClass),
                     l = c.find(a.option.second.eClass);
                 q();
                 if (f > (new Date).getTime() / 1E3) var r = setInterval(function() {
                     q()
                 }, 1E3)
             } else alert("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00"), b(this).append("Data nulla o non valida mm/dd/yyyy. Esempio: 12/25/2014 19:30:00")
     }
})(jQuery);
/*]]>*/
</script>
<div id='stilecountdown' class='timerArea' ></div>
<script>
$(document).ready(function() {
$("#stilecountdown").countdown( {
dateEnd:'12/25/2024 00:00:00',
format:true,
callback:function(){alert('Def Ready')}
},
{
timezone:false,
offset:0
}
);
});
</script>

da incollare come il precedente in un widget HTML/Javascript. Si clicca su Salva e si posiziona il widget con il drag&drop. Si possono personalizzare i parametri colorati di rosso e si può sostituire l'immagine di background incollando un altro URL al posto di quello colorato di viola. Se nel vostro modello avete già JQuery, potete evitare di incollare la riga evidenziata di verde. Ho pubblicato una Demo del countdown.

Demo Clicca qui

Il parametro essenziale da settare è quello della data e ora del termine del countdown evidenziata di giallo. Concludo ricordando che questi stessi codici funzionano anche su Wordpress e altre piattaforme.