Costruire un orologio con cicli di temporizzazione
- Settembre 16, 2010
- by
- Donatantonio
La precisa temporizzazione degli eventi sulle pagine web le trasforma da documenti statici a vere applicazioni multimediali.
Un esempio classico e allo stesso tempo esaustivo è la realizzazione di un orologio javascript che utilizzi dei cicli di temporizzazione.
L’istruzione necessaria a temporizzare una funzione è:
var timeout = setTimeout('funzione();',1000);
Mentre per interrompere un ciclo di temporizzazioni la funzione è:
clearTimeout(timeout);
Vediamo ora il codice necessario alla realizzazione di un orologio:
var timeout; function ScriviOra(){ // Istanzio l'oggetto Date e ricavo ora, minuti e secondi var oggi = new Date(); var ore = oggi.getHours(); var minuti = oggi.getMinutes(); var secondi = oggi.getSeconds(); // Formatto minuti e secondi su due cifre minuti = Formatta(minuti); secondi = Formatta(secondi); // Scrivo la stringa contenente l'orario in un campo di tipo input var orario = ore + ":" + minuti + ":" + secondi; document.getElementById('time').value=orario; // Ripeto la funzione dopo un secondo timeout = setTimeout('ScriviOra();', 1000); } // Funzione necessaria a formattare l'orario function Formatta(valore){ if(valore < 10){ return "0"+valore; } return valore; } // La funzione necessaria ad interrompere l'orologio function FermaOra(){ clearTimeout(timeout); }
Visto il codice javascript è ora necessario creare il campo di input che conterrà l’orario e due bottoni, uno per inizializzare l’orologio e uno per interromperlo:
<input type='text' id='time' size='8' readonly/> <br/> <input type='button' value='Start orologio' onClick='ScriviOra();'/> <input type='button' value='Stop orologio' onclick='FermaOra();'/>
Il cuore dello script è la funzione ScriviOra(). Ogni secondo la funzione determina l’ora corrente, la formatta e la inserisce nel campo di testo e imposta un timeout per eseguire ScriviOra() un secondo dopo.
Da notare come lo script inizi dichiarando la variabile che conterrà i timeout.
Infine la funzione FermaOra() ha il compito di annullare l’ultimo timeout impostato, l’effetto sarà quello di veder fermo l’orario all’ultima esecuzione della funzione ScriviOra().
Cliccando qui è possibile vedere in esecuzione il codice completo