Un orologio scorrevole in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Molti Webmaster che amano mostrare la data e l'ora corrente sul proprio siti vorrebbero visualizzare l'ora in modalità scorrevole, lasciando aumentare il numero dei secondi da 0 a 59 prima di vedere scattare il minuto successivo.

La soluzione è semplice ed è realizzabile lato client in Javascript.

Per prima cosa creiamo un elemento di testo a cui assegnamo un identificativo che richiameremo nello script di riferimento

<span id="orologio"></span>
Di seguito il codice dello script
function OrologioScorrevole()
{
    var data = new Date();
    var hh = data.getHours();
    var mm = data.getMinutes();
    var ss = data.getSeconds();
    var ora = hh + ":" + mm + ":" + ss;
    document.getElementById("orologio").innerText = ora;
    window.setTimeout("OrologioScorrevole()", 1000);
}
Ricarichiamo la funzione che mostra l'ora ogni secondo ed il gioco è fatto!

Per far partire la funzione dobbiamo lanciarla all'evento onload del body della pagina
<body onload="OrologioScorrevole()">
Di seguito un esempio

A proposito... che ora è?

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD