Salve vi spiego quello che sto realizzando.
L'utente cliccando su un bottone fa partire un timer che è calcolata dalla differenza tra la data del click e la data attuale.
A questo timer è associata una barra di avanzamento che aumenta in base alla differenza delle date e cambia colore dinamicamente.
Vi faccio vedere lo script, che funziona tutto. Soltanto volevo chiedervi se è fatto in modo corretto, oppure se può essere "snellito" in modo più ordinato.
Non essendo un esperto di javascript chiedo a voi esperti.
codice HTML:
<script type="text/javascript">
var d1;
var d2;
var d3;
$(document).ready(function() {
d1 = new Date('<?php echo $data['selectRest']; ?>');
d2 = new Date();
setInterval(function() {
d2.setSeconds(d2.getSeconds()+1);
d3 = new Date();
var differenza = ottieniDifferenza(d1, d2);
var percentuale = ottieniPercentuale(d1, d3);
var coloreBarra = ottieniColoreBarra(d1, d3);
$("#restTimeP").html(differenza);
$("#progBarP").html(percentuale);
$("#progBarP").width(percentuale);
$("#progBarP").addClass(coloreBarra);
}, 1000);
});
function ottieniDifferenza(a, b) {
var data1 = a.getTime();
var data2 = b.getTime();
var ms = data2 - data1;
ms = ms/1000;
var s = Math.floor(ms % 60);
ms = ms/60;
var m = Math.floor(ms % 60);
ms = ms/60;
var o = Math.floor(ms % 24);
var g = Math.floor(ms/24);
if (g) {
var giorni = g + ' giorni, ';
}
if (o) {
var ore = o + ' ore, ';
}
if (m) {
var minuti = m + ' minuti, ';
}
return [giorni,ore,minuti,s + ' secondi'];
}
function ottieniPercentuale(a, b) {
var data1 = a.getTime();
var data2 = b.getTime();
var ms = data2 - data1;
var progresso = 50 + (ms * 0.01) / 1000;
var round = Math.round(progresso);
if (round > 100) {
return 100 + '%';
} else {
return round + '%';
}
}
function ottieniColoreBarra(a, b) {
var data1 = a.getTime();
var data2 = b.getTime();
var ms = data2 - data1;
var progresso = 50 + (ms * 0.01) / 1000;
var roun = Math.round(progresso);
if (round <= 30) {
return "red";
} else if (round <= 60) {
return "orange";
} else {
return "lime";
}
}
</script>
e poi ovviamente c'è la parte html e css.
Cosa ne pensate?