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.
e poi ovviamente c'è la parte html e css.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>
Cosa ne pensate?

Rispondi quotando