Cos'è ElectroYou | Login Iscriviti

ElectroYou - la comunità dei professionisti del mondo elettrico

3
voti

Orologio + cronometro digitale su PC 3a parte

Nei primi 2 articoli, ne ho descritto il funzionamento concentrandomi sull' analisi delle varie righe di codice. Il primo articolo trattava la parte statica cioè si occupa della visualizzazione dei display semplicemente senza effettuare il conteggio. Noi cioè aprivamo la pagina web e visualizzavamo il cronometro settato su 0:00:00.0

La seconda parte descriveva come avveniva il conteggio cambiando in modo dinamico, i link alle immagini dei digit del display.

In questa terza fornisco il codice in modo che chi ne avesse bisogno può semplicemente apportare le modifiche che gli servono ed utilizzalo.

Non so quale sia la precisione ma sembra andare abbastanza bene. Ho notato comunque che il browser arresta temporaneamente l' esecuzione degli script JS se non si sta visualizzando la pagina. Quindi ridurre la finestra ad icona per fare altre cose mentre il cronometro è in conteggio, significherebbe arrestarlo.

Ecco cosa fare:

1) Creare sul Desktop una cartella chiamata TIMER.

2) Creare al suo interno un file chiamandolo index.html e copiarvi dentro il seguente codice: 

<html>
  <head>
    <title>Cronometro</title>
    <meta charset="utf-8" />
    <meta name="description" content="Cronometro JQuery" />    
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jqClock.css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqClock.js"></script>
    <script type="text/javascript" src="myfunction.js"></script>    
 </head>
<body>
<div id="clock">L' applicazione necessita l' attivazione di Javascript</div>
<div id="chronometer"> 
<ul>
<li id="D5"><img class="digit" src ="digits/0.png" width="134" height="206" alt="" /></li>
<li><img class="dp2" src ="digits/2p.png" width="14" height="70" alt="" /></li>
<li id="D4"><img class="digit" src ="digits/0.png" width="134" height="206" alt="" /></li>
<li id="D3"><img class="digit" src ="digits/0.png" width="134" height="206" alt="" /></li>
<li><img class="dp2" src ="digits/2p.png" width="14" height="70" alt="" /></li>
<li id="D2"><img class="digit" src ="digits/0.png" width="134" height="206" alt="" /></li>
<li id="D1"><img class="digit" src ="digits/0.png" width="134" height="206" alt="" /></li>
<li><img class="dp1" src ="digits/1p.png" width="7" height="7" alt="" /></li>
<li id="D0"><img class="digit" src ="digits/mini/0.png" width="68" height="104" alt="" />
</li>
</ul>
</div>
<div id="start_time"> </div>
<div id="buttons">
<input type="button" value="Start" id="Start" />
<input type="button" value="Stop" id="Stop" />
<input type="button" value="Reset" id="Reset" />
</div>
<div id="msg">Non ridurre mai ad icona la finestra del browser durante il conteggio del cronometro.</div>
</body>
</html>

3) Creare nella cartella Timer un file chiamandolo jqClock.css e copiare al suo interno: 

  body{
background-image:url('digits/background.png'); 
background-repeat:repeat;
}

#clock{position:fixed; top: 0;}


.jqclock { float:left; text-align:center; padding: 10px; margin:10px; }
.clockdate { color: DarkRed; font-size: 2em; display: inline;}
.clocktime { 
padding-left: 35px; 
font-size: 2em; 
color: DarkRed; 
margin: 2px; 
display:inline;
 }

.dp2{padding-bottom: 50px;}

#chronometer{position: relative; margin-top:100px;}

#chronometer li
{
    display: inline;
    list-style-type: none;
    padding-left: 0px;
}

#start_time{font-size: 2em; margin:20px;}

#buttons{float:right;}

#buttons input{margin-right: 30px;}

#msg{position:fixed; bottom: 0;}

4) Creare sempre nella cartella TIMER un file chiamandolo myfunction.js e copiarvi all' interno il seguente codice: 

$(document).ready(function(){
    
    //for chronometer
    
    var reset_html = $("#chronometer").html();
    
    var arr_chronometer={
        tenths:0,
        seconds:0,
        minutes:0,
        hours:0
    };
    
    function reset_arr_chronometer(){
        for (index in arr_chronometer) {
            arr_chronometer[index]=0;
        }
    }
    
    
    var timer_id=null;
    var isstarted=false;
        
    function start(){
        
        if(!isstarted){
           // $("#debug").html("start")
            isstarted=true;
            var start_date = $(".clocktime").html();
            $("#start_time").html("Start ore: "+ start_date);
                  
            timer_id=setInterval(function(){
                increment_tenth();
            }, 100);
        
        }
    }//close function start()
     
    function stop(){
       
        if(isstarted){
         //    $("#debug").html("stop")
            isstarted = false;
            clearInterval(timer_id);         
        }
    }//close function stop()
    
    
    function reset(){
        stop();
        $("#chronometer").html(reset_html);
        $("#start_time").html(" ");
        reset_arr_chronometer();
        isstarted=false;
    }
     
   
 
    //////////////////////////////////////////////////
    
    
    $("#clock").clock({
        "langSet":"it"
    });
      
    
                
    $("#Start").click(function(){
        start();
    });
                
    $("#Stop").click(function(){
        stop();
    });
                
    $("#Reset").click(function(){
        reset();
    });
      
     


    //timer functions

    function increment_tenth(){
     
        if(arr_chronometer['tenths']==9){
            arr_chronometer['tenths']=0;
            increment_second();
        }
        else arr_chronometer['tenths']++
    
        view_tenths();
    }


    function increment_second(){
        if(arr_chronometer['seconds']==59){
            arr_chronometer['seconds']=0;
            increment_minute();
        }
        else arr_chronometer['seconds']++;
    
        view_seconds();
    }
    
    function increment_minute(){
       
        if(arr_chronometer['minutes']==59){
            arr_chronometer['minutes']=0;
            increment_hour();
        }
        else arr_chronometer['minutes']++;
     
        view_minutes();
        
    }


    function increment_hour(){
  
        if(arr_chronometer['hour']< 9){
            arr_chronometer['hour']++;
        }
        else stop();     //timer stop
    
        view_hours();
    }


    var HDigit;
    var LDigit;
   

    function view_tenths(){
        
        setDigit(arr_chronometer['tenths']);
        $("#D0 img").attr("src", "digits/mini/"+LDigit + ".png"); 
    }

    function view_seconds(){
        setDigit(arr_chronometer['seconds']);
        $("#D1 img").attr("src", "digits/"+LDigit + ".png");
        $("#D2 img").attr("src", "digits/"+HDigit + ".png");
        
    }
    
    function view_minutes(){
        setDigit(arr_chronometer['minutes']);
        $("#D3 img").attr("src", "digits/"+LDigit + ".png");
        $("#D4 img").attr("src", "digits/"+HDigit + ".png");       
    }

    function view_hours(){
        setDigit(arr_chronometer['hours']);
        $("#D5 img").attr("src", "digits/"+LDigit + ".png");
    }


    function setDigit(val){
        if(val < 10){
            HDigit = 0;
            LDigit = val;
        }else{
            val=val+"";                  //convert in string format
            HDigit =val.substring(0,1);
            LDigit = val.substring(1,2);
        }
       
    }//close function setDigit(val)
    
});   //close $(document).ready

5) Scaricare da http://jquery.com/ la versione 1.7.2 minified e decomprimerla all' interno della cartella TIMER. Il file si chiamerà jquery-1.7.2.min.js

6) scaricare il file jqClock.js da: https//github.com/Lwangaman/jQuery-Clock-Plugin e aggiungerlo nella cartella TIMER.

7) A questo punto creare all' interno di TIMER una cartella chiamata digits e salvare al suo interno le seguenti immagini: (Per salvarle basta cliccare col tasto destro del mouse sull' immagine e scegliere Salva come...)

0.png

0.png

1.png

1.png

2.png

2.png

3.png

3.png

4.png

4.png

5.png

5.png

6.png

6.png

7.png

7.png

8.png

8.png

9.png

9.png

1p.png

1p.png

2p.png

2p.png

background.png

background.png

8) Creare all' interno di digits una nuova cartella chiamata mini. 9) Inserire al suo interno le icone da 0.png fino a 9.png e ridimensionarle del 50% usando un programma di grafica.

A questo punto per avviare l' applicazione basta aprire la cartella TIMER e fare doppio click su index.html.

Estratto da "https://www.electroyou.it/mediawiki/index.php?title=UsersPages:Daniele78:orologio-cronometro-digitale-su-pc-3a-parte"
2

Commenti e note

Inserisci un commento

di ,

Grazie! Il mio problema era che riuscivo ad ottenere solo ore, minuti e secondi. Probabilmente però si può fare. Con calma farò poi una ricerca più approfondita.

Rispondi

di ,

Penso che potresti migliorare la precisione e risolvere il problema del cronometro che si ferma quando riduci la finestra a icona, modificando la funzione increment_tenth(). In pratica ogni volta che è chiamata leggi l'orologio di sistema, calcoli la differenza con l'istante in cui hai fatto partire il cronometro e la visualizzi. Purtroppo sono un po' arrugginito su Javascript e non ricordo come si faceva a leggere il clock di sistema, comunque c'è la funzione apposita. In ogni caso, bravo.

Rispondi

Inserisci un commento

Per inserire commenti è necessario iscriversi ad ElectroYou. Se sei già iscritto, effettua il login.