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

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:

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: