In questo articolo spiegherò come programmare il seguente cronometro in Javascript:
<html> <head> <style type="text/css"> .cronometro { background-color: transparent; border-color: grey; } .countdown { border-color: grey; width:70px; } .block { border: 3px solid black; } </style>
Il codice tra i tag style è codice CSS che verrà usato per le decorazioni del nostro cronometro.
<script type="text/javascript"> var minuti=0; var secondi=0; var x=0; var v=0; var m=0;
Le variabili minuti e secondi serviranno ovviamente a determinare i rispettivi secondi e minuti indicati nel cronometro, le variabili x,v e m servono a cambiare lo svolgimento di alcune funzioni a seconda del loro valore.
La funzione tempo() serve ad aggiornare il tempo indicato dal cronometro, e le variabili “x” e “m” servono a bloccare la funzione se l’ utente vuole bloccare il cronometro attraverso il pulsante “Ferma”.
function tempo() { if(x==0 & m==0) { if(secondi==60) { secondi=0; minuti++; } secondi++; document.getElementById("minuti").innerHTML=minuti; document.getElementById("secondi").innerHTML=secondi; setTimeout("tempo()", 1000); } }
La funzione Cronometro() è la principale, poichè avvia le altre due funzioni tempo() e countdown(). Questa funzione, infatti, avvia per primo la funzione countdown() e verifica se la variabile count è uguale a 0 per poi avviare la funzione tempo().
function Cronometro() { if(document.getElementById("countdown").value=="0") { document.getElementById("cronometro").className="cronometro"; document.getElementById("cronometro").disabled=false; v=0; x=0; if(document.getElementById("cronometro").value=="Ferma") { document.getElementById("cronometro").value="Continua"; document.getElementById("cronometro").className="block"; document.getElementById("cronometro").disabled=true; x=1; setTimeout("continua()", 1000); } else { document.getElementById("cronometro").value="Ferma"; tempo(); } } else { document.getElementById("cronometro").className="block"; document.getElementById("cronometro").disabled=true; if(v==0) { v=1; x=0; m=0; countdown(); } } }
La funzione countdown() non fa altro che diminuire il valore della variabile count per ogni secondo che passa attraverso la funzione setTimeout().
function countdown() { if(count != 0) { document.getElementById("resetta").disabled=true; document.getElementById("resetta").className="block"; } else { document.getElementById("resetta").disabled=false; document.getElementById("resetta").className="cronometro"; } if(secondi==0 & minuti==0) { if(x!=1 & m!=1) { if(document.getElementById("countdown").value==0) { Cronometro(); } else { count--; document.getElementById("countdown").value=count; setTimeout("countdown()", 1000); } } } }
La funzione resetta() riavvia il cronometro resettando le variabili che determinano il tempo del cronometro (secondi e minuti) e il countdown.
Nell’ ultima riga l’ OnKeyUp permette di avviare/fermare il cronometro premendo il tasto spazio.
function resetta() { document.getElementById("cronometro").disabled=false; document.getElementById("cronometro").className="cronometro"; m=1; count=10; document.getElementById("countdown").value=count; minuti=0; secondi=0; document.getElementById("minuti").innerHTML=minuti; document.getElementById("secondi").innerHTML=secondi; document.getElementById("cronometro").value="Inizia"; v=0; } function continua() { document.getElementById("cronometro").className="cronometro"; document.getElementById("cronometro").disabled=false; } </script> </head> <body OnKeyUp="if(event.keyCode == 32){Cronometro();}">
Tutto questo codice è HTML che determina la struttura del cronometro.
<table align="center"> <td> <table> <tr> <td>Cronometro</td> </tr> </table> <table> <tr> <td id="minuti"></td> <td id="secondi"></td> </tr> </table> <table> <tr> <td><input type="submit" value="Inizia" OnClick="Cronometro()" id="cronometro"></td> <td><input type="submit" value="Resetta" OnClick="resetta()" id="resetta"></td> <td></td> </tr> <tr><td>Countdown: </td><td><input type="text" disabled="disabled" value="10" id="countdown"></td></tr> </table> </td> </table>
Il seguente codice Javascript imposta il tempo iniziale della variabile count e del cronometro.
<script type="text/Javascript"> var count=document.getElementById("countdown").value; document.getElementById("minuti").innerHTML="0"; document.getElementById("secondi").innerHTML="0"; </script> </body> </html>
Ti è piaciuto questo articolo? Allora ti piacerà anche:
Creare un calendario in Javascript
Come realizzare uno slider di immagini con dissolvenza in Javascript