Un countdown in javascript
Javascript ci da la possibilità di eseguire periodicamente del codice. La funzione che ci permette di fare ciò e setInterval.
Possiamo creare un semplice countdown per lanciare i nostri razzi sulla luna, eccone una implementazione:
1 2 function countdown() { 3 4 if( counter == 0) { 5 6 document.getElementById( target ).innerHTML = " Partito!!"; 7 8 clearInterval( id ); 9 10 } else { 11 12 document.getElementById( target ).innerHTML = counter; 13 14 --counter; 15 16 } 17 18 } 19 20 function startCountdown( id, container) { 21 22 counter = document.getElementById( id ).value; 23 24 target = container; 25 26 id =setInterval( "countdown()", 1000 ); 27 28 } 29
Scriviamo un po’ di html su cui applicare la funzionalità:
<input type="text" id="startNum">
<input type="button" value="Start!" onclick="startCountdown( 'startNum', 'numContainer' )" />
<p>...<span id="numContainer"></span>....</p>
Come potete vedere la funzione setInterval accetta due parametri, una stringa di testo che contiene la chiamata alla funzione con gli eventuali parametri, e un intero che rappresenta in millisecondi un periodo temporale.
Nel nostro caso la funzione countdown verrà invocata ogni secondo ( 1000ms ).
Per terminare l’esecuzione periodica della funzione utilizziamo il metodo clearInterval che accetta l’id dell’intervallo che abbiamo creato, id che ci viene restituito da setInterval al momento della sua invocazione.
