Ovviamente non usatelo in altri blog.. post in bacheche di siti vari, o altri siti etc..! Mentre siete liberi di usarlo per i siti che costruite voi, e non per mostrare il codice!.. (questo vale anche per tutti gli altri post con codice utile che metto sul blog)
Bene, quante volte vi sarà capitato di voler inserire nelle pagine del vostro sito un orologio per far apparire l'orario aggiornato sempre in sovraimpressione? A me è successo più di una volta..
Per questo motivo vi riporto qui il mio orologio da sito che voi potete utilizzare copiando il codice o modificandolo come meglio vi aggrada. Vi mostro l'intera pagina html (l'essenziale) con il codice javascript (intero) e poi vi spiegherò il tutto riga per riga.
<html>
<head>
<title>Orologio_javascript</title>
<script type="text/javascript">
function orologio()
{
var tempo = new Date();
var ora=tempo.getHours();
var minuto=tempo.getMinutes();
var secondo=tempo.getSeconds();
if (ora<10) {ora="0" + ora;}
if (minuto<10) {minuto="0" + minuto;}
if (secondo<10) {secondo="0" + secondo;}
document.getElementById("mostra_ora").value=ora + ":" + minuto + ":" + secondo;
setTimeout("orologio()", 1000);
}
setTimeout("orologio()", 0);
</script>
</head>
<body>
<input id="mostra_ora" style="text-align:center;" disabled="disabled"/>
</body>
</html>
Se create un file html con il codice qui sopra e poi lo visualizzate nel vostro browser otterrete il seguente risultato in figura (con l'ora che si aggiorna secondo dopo secondo):
All'interno dei tag script possiamo notare che è stata definita la funzione orologio().
All'interno delle parentesi ho definito e inizializzato 4 variabili:
var tempo = new Date();
Questa variabile viene inizializzata con una istanza della classe Date. In questo modo dalla variabile tempo potremo prendere tutte le informazioni riguardanti la data e l'orario attuale. (A noi interessa solo l'orario)var ora=tempo.getHours();
var minuto=tempo.getMinutes();
var secondo=tempo.getSeconds();
var minuto=tempo.getMinutes();
var secondo=tempo.getSeconds();
Come si può facilmente intuire inizializziamo le tre variabili con i valori dell'ora, dei minuti e dei secondi che recuperiamo dalla variabile tempo tramite gli opportuni metodi (getHours(), getMinutes(), getSeconds())
if (ora<10) {ora="0" + ora;}
if (minuto<10) {minuto="0" + minuto;}
if (secondo<10) {secondo="0" + secondo;}
if (minuto<10) {minuto="0" + minuto;}
if (secondo<10) {secondo="0" + secondo;}
Queste 3 righe sopra non sono strettamente necessarie al funzionamento dell'orologio, nel senso che queste righe servono per migliorare l'estetica delle cifre dell'orologio. Per intenderci: non usando queste righe le cifre 0 1 2 3 4 5 6 7 8 9 ci apparirebbero senza lo 0 davanti e quindi ad esempio invece di visualizzare l'ora 19:05:09, la visualizzeremmo così: 19:5:9 il che è un po' antiestetico (almeno per quanto mi riguarda)
Queste righe dunque non fanno altro che controllare se l'ora, il minuto ed il secondo abbiano un valore minore di 10, in tal caso si aggiunge lo 0 davanti.
document.getElementById("mostra_ora").value=ora + ":" + minuto + ":" + secondo;
Questa riga inserisce l'orario completo nell'input con id "mostra_ora" definito con la riga (<input id="mostra_ora" style="text-align:center;" disabled="disabled"/>) nel body e quindi consente la visualizzazione dell'orario nella pagina.
setTimeout("orologio()", 1000);
Questa riga dice di caricare la funzione orologio() dopo 1000 millisecondi (cioè un secondo). In questo modo la funzione si ricaricherà ogni secondo. E' importante metterla all'interno della funzione, mettendola fuori non avremmo il ricaricamento ciclico.
Al di fuori della funzione dobbiamo dare in qualche modo input al browser di leggere la funzione la prima volta. Questo potrebbe essere fatto tramite l'attributo onload del body, ma qui ho usato uno stratagemma. Ho utilizzato di nuovo il setTimeout però impostando i millisecondi a 0 con la riga:
setTimeout("orologio()", 0);
In questo modo appena viene caricata la pagina dal browser, la funzione viene subito richiamata la prima volta dopo 0 millisecondi (per poi essere ricaricata dopo 1 secondo tramite l'altra funzione setTimeout utilizzata all'interno della funzione).
Bene.. spero che questo script vi serva.. e utilizzatelo senza problemi. Ciaooo :)
ciao complimenti per il blog interessante.
RispondiEliminasai e' da poco che ho imparato a realizzare degli orologini creati con frontpage, se ti va poi venirli a vedere nel mio blog.
mi piacerebbe realizzarli anche con la lancetta!! magari potrei imparare!!
come fare con frontpage? grazie in anticipo della riposta intanto m'iscrivo al tuo blog!! ;)
a presto :)
@nanussa
RispondiEliminaCiao grazie.. scusa se ti rispondo con tanto ritardo.. ma come vedi sono mesi che non scrivo più un post.. spero di riprendere a breve :)
Comunque ho dato un'occhiata al tuo blog, noto che lo tieni sempre aggiornato (non come il sottoscritto :D) ..ed è davvero fatto bene e pieno di contenuti :)
Sono andato a guardare nella sezione "orologini" .. ma forse li hai tolti infatti adesso vedo solo tanti bei calendari.. complimenti per i lavori :)
Per quanto riguarda frontpage.. non vorrei sbagliarmi ma credo che l'ultima versione sia del 2003.. infatti l'ultima volta che l'ho usato penso sia stata molti anni fa :D
In ogni caso si poteva andare a modificare il codice html contemporaneamente alla creazione dinamica della pagina (come credo tu abbia fatto per i calendarietti). Comunque se posso essere utile sono qui :)
Ciao e a presto :)
ciao grazie di aver risposto :)
RispondiEliminaper gli orologini non ci sono nel mio blog perche' gli ho spostati nell'altro mio blog dedicato alla grafica....e' da pochi mesi che l'ho creato,
trovi il banner sul mio blog appena entri sulla destra, e' un banner nero, ti porta sull'altro mio blog, vieni a farmi visita, ok?
purtroppo non ho capito come realizzare gli orologi con le lancette.......... ma un giorno ci riusciro' ...almeno spero.
vedro' di studiare meglio questo codice, grazie ancora, ti auguro una felice giornata, ciao :)