Menù

Demo

  • aggiornato il 11/03/2025 14:49:34

Top 5

Orologio digitale Javascript

In questo esempio ho voluto simulare l'effetto lampeggiante della mia fastidiosissima radiosveglia.

Di seguito il codice Javascript commentato

function clock() {
       // creiamo l'oggetto 
       var data = new Date();
       // recupero l'ora corrente 
       var ora = data.getHours();
       // recupero i minuti attuali 
       var min = data.getMinutes();
       // recupero i secondi attuali 
       var sec = data.getSeconds();
       // formatto i minuti
       if (min < 10) {min = "0" + min}
       // in base ai secondi imposto il segno 
       var sign = sec % 2 == 1 ? ":" : " ";
       // preparo l'output 
       var output = ora + sign + min;
       // scrivo l'ora nell'elemento 
       document.getElementById("orologio").innerHTML = output;
       // richiamo la funione tra un secondo 
       setTimeout("clock()", 1000);
}
clock();

Altrettanto importante è il codice Css e soprattutto nel mio esempio il font che ho usato evita fastidiosi scatti.

#orologio {
    width:80px;
    text-align: center;
    background-color: #000;
    color:yellow;
    font-weight: bold;
    font-family: "Courier New";
    padding:4px;
    font-size: 1.1em;
    border: 3px solid #2D69AF;
}


criric

Mi sono appassionato di programmazione web a 34 anni, un pò tardi, da allora però non perdo mai occasione per imparare qualcosa di nuovo in questi campi.

Inserisci un commento

Codice antispam

Categorie

Comunicazioni

Puoi utilizzare questo modulo per qualsiati tipo di segnalazione.

Codice antispam

 

I dati di questo modulo non verranno pubblicati.