MICHELEPISANI.IT
 

Calculate Time Km and Average Speed

Calcolo del Tempo al Km e della velocità media in Javascript Puro

Javascript puro - Calcolo del Tempo al Km e della Velocità Media
Luglio 20
07:002016

Per gli appassionati di sport su strada, pista o quant'altro dove è interessante analizzare le proprie tempistiche o per gli sviluppatori di app ibride o web app che necessitano di uno script in grado di fornire il valore di velocità media e di tempo per km, data la distanza percorsa ed il tempo impiegato, ecco a voi un codice in Javascript puro in grado di farlo.

Senza stare troppo dietro all'aspetto grafico ho realizzato un codice che risulterà in questo (immagine dell'aspetto finale, modificabile a piacimento gestendo i CSS) per testare lo script scorrete a fine articolo:

Javascript - Calcolo del tempo a km e della velocità media

Fig. 1 - Javascript Puro - Calcolo del tempo a km e della velocità media


L'HTML utilizzato è il seguente:

<b class="header">Inserisci la distanza (enter the distance)</b><br />
Meteri (meters): <input type="text" id="meters" value="0"><br /><span id="alert_meters"></span><br /><br />

<b class="header">Inserisci il tempo trascorso (enter the time spent)</b><br />
hh: <input type="text" id="hh" value="0"><br />
mm: <input type="text" id="mm" value="0"><br />
ss: <input type="text" id="ss" value="0"><br /><span id="alert_time"></span><br /><br />

<input type="button" value="Calcola/Calculate" onclick="calculate();" /><br /><br />

<b>Tempo al Km (Time Km):</b> <span id="timekm"></span><br />
<b>Velocità media (Average speed):</b> <span id="avgspeed"></span>

La funzione Javascript, il cuore del meccanismo, che gestisce anche i casi di errore nel caso in cui i valori richiesti non siano stati inseriti o lo siano nel formato non previsto:

function calculate() {
  var seconds=0;
  var meters=0;
  var time_ms=0;
  var speed=0;
  var speed_km=0;
  var bln_calculate=true;
  document.getElementById('alert_meters').innerHTML = '';
  document.getElementById('alert_time').innerHTML = '';

  meters = Number(document.all['meters'].value);
  hh = Number(document.all['hh'].value) * 60 * 60;
  mm = Number(document.all['mm'].value) * 60;
  ss = Number(document.all['ss'].value);

  if  (meters <= 0 || isNaN(meters)) {
  	document.getElementById('alert_meters').innerHTML = "Inserisci la distanza percorsa/Enter the distance";
    document.all['timekm'].innerHTML = '';
    document.all['avgspeed'].innerHTML = '';
    bln_calculate=false;
  }
  
  if ((hh==0 && mm==0  && ss==0) || isNaN(hh) || isNaN(mm) || isNaN(ss)) {
  	document.getElementById('alert_time').innerHTML = "Inserisci il tempo di percorrenza/Enter the time";
    document.all['timekm'].innerHTML = '';
    document.all['avgspeed'].innerHTML = '';    
    bln_calculate=false;
  } 

  if (bln_calculate) {
    seconds = hh + mm + ss;
    speed_km = meters * 3600 / seconds;
    time_ms = meters / seconds;
    time_ms  = 1000 / time_ms;
    seconds_calc  = Math.floor(((time_ms/60) - Math.floor(time_ms / 60))*60);
    time_ms = Math.floor(time_ms / 60);
    if (seconds_calc == 60) {
      seconds_calc == 0;
      time_ms == time_ms + 1;
    }
    document.all['timekm'].innerHTML = time_ms + ',' + seconds_calc;
    document.all['avgspeed'].innerHTML = Math.floor(speed_km) / 1000;
  }
}

E un minimo di CSS, non prettamente necessario ma per rendere leggermente gradevole il risultato del codice:

.header { font-size:20px; }
#alert_meters,#alert_time { color:#AA0000; }

Potete provare il codice funzionante in questo JSFiddle che ho preparato:

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

2 Commenti

  1. Michele giovedì 16 febbraio 2017 alle ore 22.11

    Grazie per lo script che ho cercato di utilizzare, l'unico bug che ho notato è che, nel calcolo del tempo al Km, se la cifra è ad es. 5,06 il calcolatore restituisce un risultato in questa forma 5,6. Sbaglio io qualcosa o serve una modifica esadecimale? Ciao

    Rispondi a questo commento
    • Michele PisaniAutore giovedì 16 febbraio 2017 alle ore 23.55

      Ciao Michele,
      ho verificato e non ho riscontrato alcuna anomalia, potresti indicarmi i valori che hai utilizzato in modo da vedere se eventualmente è possibile riprodurre l'eccezione di cui parli?
      Grazie per ora.

      Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …