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

Ciao peppe,
che tipo di errore ti dà? Hai verificato se il resto delle caratteristiche è …

peppe

Ciao, perchè non posso unire takeshy kurosawa con takeshy kurosawa shop? non sono nomi simili?

Michele Pisani

Grazie Ottavia, fa sempre piacere ricevere un feedback. Buon proseguimento.

Ottavia Neruda

La tua guida mi è stata utilissima. L'ho trovata semplice, ben fatta ed intuitiva. Grazie.