Creare un countdown personalizzato per un evento.

Come creare un countdown personalizzato da usare per mostrare ai lettori quanti giorni, ore, minuti e secondi manchino a un dato evento.

Mi sono già occupato di countdown relativamente alle Feste di Natale e di Capodanno ma un widget del genere può essere utile in moltissimi altri casi come potrebbe essere il compleanno del blog, il compleanno del suo autore o l'inizio di un evento particolarmente importante come le Olimpiadi o la finale del Campionato del Mondo di Calcio.

L'obiettivo di questo articolo è quello di condividere un codice che può essere modificato nella data e ora dell'evento per poter essere usato in tutte le occasioni. Il countdown è di aspetto scuro e si può adattare a tutti i layout ma si possono anche modificare i colori e l'immagine di sfondo e scegliere quelli del nostro sito. Il countdown si basa sulla libreria JQuery ed è stato ricavato dai numerosi plugin disponibili per la piattaforma Wordpress

e può essere installato in una qualsiasi pagina web che supporti il javascript. Per gli utilizzatori della piattaforma Blogger basterà andare su Layout > Aggiungi un gadget > HTML/Javascript. Si può opzionalmente digitare il titolo mentre in Sezioni del sito si incolla il seguente 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/2015 00:00:00',
format:true,
callback:function(){alert('Def Ready')}
},
{
timezone:false,
offset:0
}
);
});
</script>

Si clicca su Salva e si posiziona con il mouse. 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 giallo. La modifica più importante riguarda l'impostazione della data dell'evento

Bisogna usare lo stile americano e quindi la mezzanotte del  25 Dicembre 2015 dovrà essere indicata come 12/25/2015 00:00:00 usando la sintassi mm/dd/yyyy cioè mese/giorno/anno. Per l'ora si userà invece lo stile europeo considerando il giorno di 24 ore (Es: 19:20 e non 7:20 p.m). Quando il countdown mostrerà 1 giorno o 1 ora o 1 minuto o 1 secondo di visualizzerà l'espressione singolare invece che quella plurale. Si possono creare countdown anche per eventi che si svolgeranno a distanza 2, 3 o più anni. Nella demo è stato settato come evento la mezzanotte del Natale 2015.