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 (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

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

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

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

IN EVIDENZA
DOWNLOAD