Javascript consente con varie modalità l'inserimento automatico di data e ora all'interno dei documenti. In realtà non si tratta dell'ora esatta in termini assoluti, ma di cio' che il sistema del visitatore mostra al browser. In altri termini Javascript legge l'ora dal computer client e la restituisce sullo schermo.
Lo script che presentiamo va oltre e aggiorna, secondo dopo secondo, l'ora senza il refresh di pagina. Dunque non più un'ora fissa in base all'entrata del visitatore, ma continuamente aggiornata.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il codice script va inserito nella pagina (all'interno dei tag head) ed è il seguente:
<script language="javascript" src="liveclock.js"></script>
<body onLoad="show_clock()">
Il codice che gestisce l'ora è contenuto all'interno del file liveclock.js .
Vediamo il codice per intero:
var myfont_face = "Verdana";
var myfont_size = "10";
var myfont_color = "#000000";
var myback_color = "#FFFFFF";
var mypre_text = "Sono le ";
var mywidth = 300;
var my12_hour = 0;
var myupdate = 1;
var DisplayDate = 1;
var ie4=document.all
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var dn = "";
var mn = "";
var old = "";
var DaysOfWeek = new Array(7);
DaysOfWeek[0] = "Domenica";
DaysOfWeek[1] = "Lunedì";
DaysOfWeek[2] = "Martedì";
DaysOfWeek[3] = "Mercoledì";
DaysOfWeek[4] = "Giovedì";
DaysOfWeek[5] = "Venerdì";
DaysOfWeek[6] = "Sabato";
var MonthsOfYear = new Array(12);
MonthsOfYear[0] = "Gennaio";
MonthsOfYear[1] = "Febbraio";
MonthsOfYear[2] = "Marzo";
MonthsOfYear[3] = "Aprile";
MonthsOfYear[4] = "Maggio";
MonthsOfYear[5] = "Giugno";
MonthsOfYear[6] = "Luglio";
MonthsOfYear[7] = "Agosto";
MonthsOfYear[8] = "Settembre";
MonthsOfYear[9] = "Ottobre";
MonthsOfYear[10] = "Novembre";
MonthsOfYear[11] = "Dicembre";
var ClockUpdate = new Array(3);
ClockUpdate[0] = 0;
ClockUpdate[1] = 1000;
ClockUpdate[2] = 60000;
if (ie4||ns6) { document.write('<span id="LiveClockIE"
style="width:'+mywidth+'px; background-color:'+myback_color+'"></span>'); }
else if (document.layers) { document.write('<ilayer
bgColor="'+myback_color+'" id="ClockPosNS" visibility="hide"><layer width="'+mywidth+'" id="LiveClockNS"></layer></ilayer>'); }
else { old = "true"; show_clock(); }
function show_clock() {
if (old == "die") { return; }
if (ns4)
document.ClockPosNS.visibility="show
var Digital = new Date();
var day = Digital.getday();
var mday = Digital.getdate();
var month = Digital.getMonth();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
if (mday == 1) { mn = "st"; }
else if (mday == 2) { mn = "nd"; }
else if (mday == 3) { mn = "rd"; }
else if (mday == 21) { mn = "st"; }
else if (mday == 22) { mn = "nd"; }
else if (mday == 23) { mn = "rd"; }
else if (mday == 31) { mn = "st"; }
if (my12_hour) {
dn = "AM";
if (hours> 12) { dn = "PM"; hours = hours - 12; }
if (hours == 0) { hours = 12; }
} else {
dn = "";
}
if (minutes <= 9) { minutes = "0"+minutes; }
if (seconds <= 9) { seconds = "0"+seconds; }
myclock = '';
myclock += '<font style="color:'+myfont_color+'; font-
family:'+myfont_face+'; font-size:'+myfont_size+'pt;">';
myclock += mypre_text;
myclock += hours+':'+minutes;
if ((myupdate < 2) || (myupdate == 0)) { myclock += ':'+seconds; }
myclock += ' '+dn;
if (DisplayDate) { myclock += ' di '+DaysOfWeek[day]+', '+mday+mn+'
'+MonthsOfYear[month]; }
myclock += '</font>';
if (old == "true") {
document.write(myclock);
old = "die";
return;
}
if (ns4) {
clockpos = document.ClockPosNS;
liveclock = clockpos.document.LiveClockNS;
liveclock.document.write(myclock);
liveclock.document.close();
} else if (ie4) {
LiveClockIE.innerHTML = myclock;
} else if (ns6){
document.getElementById("LiveClockIE").innerHTML = myclock;
}
if (myupdate != 0) { setTimeout("show_clock()",ClockUpdate[myupdate]); }
}
Questo codice permette di modificare la grandezza del testo, il colore, il tipo del font e la dispozione delle varie voci dello script. In particolare:
var myfont_face = "Verdana";
Indica il tipo di font utilizzato
var myfont_size = "10";
Indica la grandezza del font
var myfont_color = "#000000";
Assegna il colore al testo
var my12_hour = 0;
Restituisce l'ora nel formato 24h. Si può inserire 1 per avere il formato 12h.
var myupdate = 1;
Aggiorna l'ora ogni secondo. Può essere sostituito con 0 per rendere l'ora statica oppure con 2 per aggiornarla ogni minuto.
var DisplayDate = 1;
Visualizza o meno la data. Può essere sostituito con 0
Questo script è utile a coloro che vogliono inserire un elemento dinamico all'interno delle proprie pagine senza utilizzare applet java o applicazioni lato server.
