Contatore personalizzato per Natale e Capodanno.

Dopo essermi sbizzarrito a presentare diversi Effetti per Natale un po' in ritardo illustro un modo semplicissimo per creare un countdown impostato sulla mezzanotte del 25 Dicembre 2011. Tale script mostrerà una scritta che in tempo reale si aggiornerà sul numero di giorni, ore, minuti e secondi che mancano allo scoccare della mezzanotte. Lo script potrà facilmente essere adattato anche a un'altra scadenza temporale come potrebbe essere per esempio quella di Capodanno. Nulla vieta di utilizzarlo anche per Pasqua o per un compleanno, basta modificare la data dello script (in inglese) colorata verde.

Quando il conto alla rovescia sarà terminato, i visitatori del blog visualizzeranno un messaggio scelto dall'autore. Si potranno anche configurare dimensioni, colore e altri parametri della scritta che verrà mostrata. Il javascript potrà essere inserito in un post o anche su Layout > Aggiungi un gadget > HTML/Javascript. Il codice per Natale è questo

<style>
#contatore_natale {
color:#003366;
font-size:150%;
font-weight:bold;
}
</style>
<div id="contatore_natale">
</div>
<script language="JavaScript">
var bp_date_target = new Date("December 25, 2011 00:00:00");
var bp_date_now = new Date();
var messaggio_completo = "Auguro a tutti un Buon Natale";
if (bp_date_now >= bp_date_target) {
document.getElementById("contatore_natale").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_natale").innerHTML =  messaggio_completo;
return;
}
bp_count_down_message ="A Natale 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";
document.getElementById("contatore_natale").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>

dove i parametri colorati di rosso rappresentano rispettivamente il colore della scritta, la sua dimensione in percentuale rispetto al testo di default e il grassetto (se non la vogliamo in grassetto sostituire bold con normal o togliere la riga). Il testo colorato di viola è personalizzabile a piacere e integra i dati numerici del countdown. Ecco come appare un tale contatore

Si può adattare facilmente anche per il Capodanno modificando lo script in questo modo

<style> #contatore_capodanno { color:#940F04; font-size:150%; font-weight:bold; } </style> <div id="contatore_capodanno"></div> <script language="JavaScript"> var bp_date_target = new Date("January 01, 2012 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 ="A Capodanno 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"; 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>

dove le personalizzazioni sono le stesse del conto alla rovescia per Natale. Non si possono mettere i due script contemporaneamente nella stessa pagina perché non funzionerebbero. Si può scegliere uno dei due oppure installare quello per Natale e il 25 Dicembre sostituirlo con quello di Capodanno.