Orologio digitale Javascript

spacca!  24 scarso!  0 versione stampa invia per email scheda utente totale visite  5889
In questo esempio ho voluto simulare l'effetto lampeggiante della mia fastidiosissima radiosveglia.

Di seguito il codice javascript commentato
<script type="text/javascript">    
    function clock() {
        // creiamo l'oggetto data
        var data = new Date();
        // recuperiamo l'ora corrente
        var ora = data.getHours();
        // recuperiamo i minuti attuali
        var min = data.getMinutes();
        // recuperiamo i secondi attuali
        var sec = data.getSeconds();
        // formattiamo i minuti
        if (min < 10) {
            min = "0" + min;
        }
        // in base ai secondi impostiamo il segno
        var sign =  sec %2 == 1 ?  ":" : " ";
        // prepariamo l'output
        var output = ora + sign + min;
        // scriviamo l'ora nell'elemento
        document.getElementById("orologio").innerHTML = output;
        // richiamiamo la funione tra un secondo
        setTimeout("clock()",1000);
    }
    clock();
</script> 
Altrettanto importante è il codice css e supratutto nel mio esempio il font che ho usato evita fastidiosi scatti.
<style type="text/css">
    #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;
    }
</style>
Richiamiamo il codice nell'html in questo modo
<div id="orologio"></div>
<script type="text/javascript">    
    clock();
</script>
 
 

Inserisci un commento

non sei loggato

CAPTCHA