1. Home
  2. JavaScript
  3. Creare un cronometro in Javascript

Creare un cronometro in Javascript

by -

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

  Hunting The Invaders un gioco creato in Javascript