
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:
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
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.