Alcuni magari andranno via, non penso interessi a tutti avere un cronometro nella homepage o in altre pagine del sito, magari però qualcuno è curioso di sapere come si può fare oppure a qualcun altro magari serve per davvero!
Detto ciò, come al mio solito, vi riporto il codice javascript + html che potete utilizzare senza problemi (non in altri blog post o siti però..siete liberi di usarlo solo per i siti che costruite voi e non in altri per mostrare il codice!) e le spiegazioni del codice:
<html>
<head>
<title>Cronometro_javascript</title>
<script type="text/javascript">
var ore=0;
var minuti=0;
var secondi=0;
var decimi=0;
var visualizzazione="";
var contatore_intertempi=0;
var stop=1; //0=attivo 1=fermo
function avvia()
{
if (stop==1)
{
stop=0;
cronometro();
}
}
function cronometro()
{
if (stop==0) {
decimi+=1;
if (decimi>9) {decimi=0;secondi+=1;}
if (secondi>59) {secondi=0;minuti+=1;}
if (minuti>59) {minuti=0;ore+=1;}
if (ore<10) {visualizzazione="0" + ore;} else {visualizzazione=ore;}
if (minuti<10) {visualizzazione=visualizzazione + ":0" + minuti;} else {visualizzazione=visualizzazione + ":" + minuti;}
if (secondi<10) {visualizzazione=visualizzazione + ":0" + secondi;} else {visualizzazione=visualizzazione + ":" + secondi;}
visualizzazione=visualizzazione + ":" + decimi;
document.getElementById("mostra_cronometro").value=visualizzazione;
setTimeout("cronometro()", 100);
}
}
function intertempo()
{
if (stop==0)
{
contatore_intertempi+=1;
document.getElementById("intertempi").appendChild(document.createTextNode(contatore_intertempi + ". " + visualizzazione));
document.getElementById("intertempi").appendChild(document.createElement("br"));
}
}
function ferma()
{
stop=1;
}
function azzera()
{
if (stop==1)
{
ore=0;
minuti=0;
secondi=0;
decimi=0;
document.getElementById("mostra_cronometro").value="00:00:00:0";
}
}
</script>
</head>
<body>
<input id="mostra_cronometro" style="text-align:center;" value="00:00:00:0" disabled="disabled" />
<button onclick="javascript:avvia();" />Avvia il cronometro!</button> <button onclick="javascript:ferma();" />STOP!</button> <button onclick="javascript:azzera();" />Azzera!</button><br><br>
<button onclick="javascript:intertempo();" />Intertempo!</button>
<div id="intertempi">
</div>
</body>
</html>
Il codice come potete vedere è un po' più lungo rispetto a quello usato nell'altro post per fare l'orologio... quindi chi vuole sapere i dettagli del codice che lo fa funzionare si dovrà armare di un po' di sana pazienza e leggere le righe seguenti..
Intanto vi mostro la schermata che il browser dovrebbe mostrarvi quando caricherete la pagina html e userete il cronometro (una volta scritto il codice nel file html ovviamente..):
Per prima cosa quando viene caricata l'intera pagina oltre al tag script viene caricato (e visualizzato in questo caso) il contenuto del body:
<input id="mostra_cronometro" style="text-align:center;" value="00:00:00:0" disabled="disabled" />
<button onclick="javascript:avvia();" />Avvia il cronometro!</button>
<button onclick="javascript:avvia();" />Avvia il cronometro!</button>
<button onclick="javascript:ferma();" />STOP!</button>
<button onclick="javascript:azzera();" />Azzera!</button><br><br>
<button onclick="javascript:intertempo();" />Intertempo!</button>
<div id="intertempi">
</div>
<button onclick="javascript:intertempo();" />Intertempo!</button>
<div id="intertempi">
</div>
Con queste righe sopra ho creato: l'input che mostrerà il conteggio aggiornato del tempo; i bottoni per l'avvio, lo stop l'azzeramento e la cattura degli intertempi; il div che conterrà gli intertempi catturati.
Per avviare il cronometro, quando clicchiamo sul button apposito, viene richiamata la funzione avvia() che controlla se il cronometro non è già avviato. Se non è avviato (se la variabile stop è uguale a 1) allora pone la variabile stop al valore 0 e richiama la funzione cronometro():
function cronometro()
{
if (stop==0) {
{
if (stop==0) {
...
}
}
La funzione cronometro viene eseguita solo se la variabile stop è uguale a 0 (cioè il cronometro è stato avviato).
decimi+=1;
if (decimi>9) {decimi=0;secondi+=1;}
if (secondi>59) {secondi=0;minuti+=1;}
if (minuti>59) {minuti=0;ore+=1;}
if (decimi>9) {decimi=0;secondi+=1;}
if (secondi>59) {secondi=0;minuti+=1;}
if (minuti>59) {minuti=0;ore+=1;}
Ogni volta che viene richiamata questa funzione sarà passato 1 decimo di secondo, perciò vengono incrementati i decimi di 1, quando si arriva a 10 si azzerano e si aumentano di 1 i secondi. E così via.. Quando i secondi arrivano a 60 si azzerano e si incrementano di 1 i minuti e via dicendo fino alle ore.
if (ore<10) {visualizzazione="0" + ore;} else {visualizzazione=ore;}
if (minuti<10) {visualizzazione=visualizzazione + ":0" + minuti;} else {visualizzazione=visualizzazione + ":" + minuti;}
if (secondi<10) {visualizzazione=visualizzazione + ":0" + secondi;} else {visualizzazione=visualizzazione + ":" + secondi;}
visualizzazione=visualizzazione + ":" + decimi;
if (minuti<10) {visualizzazione=visualizzazione + ":0" + minuti;} else {visualizzazione=visualizzazione + ":" + minuti;}
if (secondi<10) {visualizzazione=visualizzazione + ":0" + secondi;} else {visualizzazione=visualizzazione + ":" + secondi;}
visualizzazione=visualizzazione + ":" + decimi;
Le righe sopra, oltre che a comporre l'intero conteggio con i vari valori, servono solo per una questione di visualizzazione, cioè far apparire la doppia cifra con lo 0 quando ore o minuti o secondi sono a cifra singola (cioè invece di far apparire 0 1 2 3 .. si fa apparire 00 01 02 03 ..)
document.getElementById("mostra_cronometro").value=visualizzazione;
Questa riga stampa il valore del conteggio all'interno dell'input creato nel body
setTimeout("cronometro()", 100);
Questa riga non fa altro che dire di ricaricare la funzione cronometro dopo un decimo di secondo (cioè 100 millisecondi)
Se ora vogliamo prendere degli intertempi (perdonatemi se non si chiamano così), cioè dei parziali, clicchiamo sul pulsante apposito per l'intertempo! Questo pulsante richiama il metodo intertempo():
function intertempo()
{
if (stop==0)
{
contatore_intertempi+=1;
document.getElementById("intertempi").appendChild(document.createTextNode(contatore_intertempi + ". " + visualizzazione));
document.getElementById("intertempi").appendChild(document.createElement("br"));
}
}
{
if (stop==0)
{
contatore_intertempi+=1;
document.getElementById("intertempi").appendChild(document.createTextNode(contatore_intertempi + ". " + visualizzazione));
document.getElementById("intertempi").appendChild(document.createElement("br"));
}
}
Questa funzione, dopo aver controllato che il cronometro sia effettivamente attivo, incrementa un contatore che tiene traccia delle volte in cui ho preso un intertempo.
Le ultime due righe servono rispettivamente per stampare nel div degli intertempi il valore del conteggio e per andare a capo.
Se ora vogliamo azzerare il cronometro.. non possiamo.. dobbiamo prima stoppare il cronometro tramite la funzione ferma() che non fa altro che impostare la variabile stop ad 1.
Perchè basta questo?
Basta perchè se è vero che la funzione cronometro() è in ripetizione ciclica ogni decimo di secondo, ci dobbiamo anche ricordare che in quella funzione ho messo un controllo sulla variabile stop e se questa non è uguale a 0 il resto della funzione non viene più eseguito. Siccome la funzione ferma() pone stop=1, la funzione cronometro non verrà + eseguita fino al riavviamento del cronometro stesso.
Se vogliamo azzerare il cronometro.. possiamo se è stato precedentemente stoppato tramite la funzione azzera():
function azzera()
{
if (stop==1)
{
ore=0;
minuti=0;
secondi=0;
decimi=0;
document.getElementById("mostra_cronometro").value="00:00:00:0";
}
}
{
if (stop==1)
{
ore=0;
minuti=0;
secondi=0;
decimi=0;
document.getElementById("mostra_cronometro").value="00:00:00:0";
}
}
Questa funzione controlla se il cronometro è fermo ed in tal caso resetta a 0 tutte le variabili temporali e aggiorna l'input che mostra il conteggio riportandolo al valore iniziale 00:00:00:0.
Ovviamente questo è un cronometro non super preciso.. nel senso che se fate mille operazioni sulla pagina mentre il conteggio è avviato, il conteggio ne risente e perderete qualche decimo di secondo per strada..quindi non usate questo cronometro per misurazioni di precisione massima..per quelle usate i cronometri veri "in carne ed ossa.."
Bene..anche questa è fatta.. spero vi sia piaciuto questo post.. alla prossima..ciao
Nessun commento:
Posta un commento