Pubblicato il 18/12/11e aggiornato il

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.




4 commenti :

  1. segnalo che nei miei blog è sparito il +1 di google al piede dei post
    è capitata anche a voi 'sta cosa??

    RispondiElimina
  2. @Tex Willer
    E' capitato a tutti quelli che usano Firefox o Chrome mentre sembra che con IE si veda ancora!!!!! c'è già chi grida al miracolo ;)

    RispondiElimina
  3. ho postato il calendario alla rovescia per capodanno ma anche mettendo la grandezza dei caratteri a 100 quando si visualiza il blog si vede la scritta " a 100 ( o a 150, o a200) solo peralcuni secondi e poi si riduce perdendo il colore alla grandezza delle lettere "normali" del blog, ma così il calendario perde importanza

    cosa fare ??

    RispondiElimina
  4. @lalo
    Se vuoi rimpicciolire i caratteri sostituisci font-size:150%; con font-size:100%; o anche meno. Per il colore puoi cambiare il parametro color:#003366;
    Se non conosci i codici dei colori consulta questo post
    http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.