Visualizzazione dei risultati da 1 a 6 su 6

Discussione: timer e progress bar

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    37

    timer e progress bar

    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?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,619
    Ciao, suppongo si possa snellire ma personalmente trovo complicato riprodurre il tuo esempio per capire come funziona e poterti dare qualche consiglio mirato.
    Ti chiedo, potresti fornire un esempio funzionante, completo anche di HTML e CSS, e sostituendo le parti PHP con ciò che dovrebbe risultare in HTML?
    Magari puoi usare un qualche playground tipo CodePen o simili per renderlo facilmente consultabile online.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    37
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, suppongo si possa snellire ma personalmente trovo complicato riprodurre il tuo esempio per capire come funziona e poterti dare qualche consiglio mirato.
    Ti chiedo, potresti fornire un esempio funzionante, completo anche di HTML e CSS, e sostituendo le parti PHP con ciò che dovrebbe risultare in HTML?
    Magari puoi usare un qualche playground tipo CodePen o simili per renderlo facilmente consultabile online.
    Qui ho messo l'esempio cosi puoi visualizzarlo nel sorgente.
    https://www.economic-boom.com/countdown.php




  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,619
    Ho visto ma non mi è molto chiaro il principio di funzionamento che hai applicato e qual è l'obiettivo finale.
    Non capisco in quale contesto tu abbia bisogno di usare un timer (che normalmente non ha un termine, altrimenti sarebbe un conto alla rovescia) impostandolo però con un valore percentuale.

    Prima di capire come puoi snellire il tutto vorrei capire come hai previsto che funzioni.

    In particolare, per il calcolo di un valore percentuale c'è bisogno di due valori che stabiliscano un intervallo (inizio e fine) e di un terzo valore variabile che può spostarsi all'interno di questo intervallo e per il quale può essere calcolato il valore percentuale. Nella funzione ottieniPercentuale vedo però che hai usato solo due valori (cioè le due date), calcolando la differenza tra quello che dovrebbe essere il valore attuale meno il valore iniziale, non capisco dove sta il valore finale; poi hai messo un valore fisso (50) che non capisco cosa dovrebbe fare.
    codice:
    var progresso = 50 + (ms * 0.01) / 1000;
    ... a parte che già questa espressione può essere ridotta così:
    codice:
    var progresso = 50 + ms / 100000;
    ... quel 50 significa che parti sempre da un valore di base del 50%?!
    Da quel che ho provato, vedo che ogni 100 secondi si incrementa di 1%, ma mi sfugge qualcosa. Quale dovrebbe essere il contesto di utilizzo; puoi chiarire?

    A parte questo, vari punti possono essere ottimizzati sia usando delle forme sintattiche più stringate, sia proprio nell'architettura dell'elaborato. Ad esempio, nelle tre funzioni hai usato parti di codice molto simili se non uguali, per cui c'è una certa ridondanza; questo può essere evitato riformulando delle specifiche funzioni per ogni processo che intendi riusare più volte e ridurre quindi la stesura dello script oltre a risparmiare (anche se in modo minimo) l'utilizzo delle risorse durante l'esecuzione.

    Eventualmente potrei fornirti delle indicazioni più specifiche ma nel caso vorrei avere più chiaro il primo punto.

    Se poi vuoi ottenere un codice ancora più funzionale ed ottimale, dovresti adoperare un approccio di programmazione orientata agli oggetti; creare quindi un oggetto (classe) dove racchiudere i metodi e le proprietà così da poterlo rendere istanziabile (ad esempio per poterlo applicare magari in modo parametrico a più elementi sulla pagina), oltre a poter sfruttare quelle caratteristiche di riusabilità, astrazione, estensibilità, proprie della programmazione ad oggetti.

    Inoltre, se vuoi realizzare una risorsa che sia distribuibile, puoi svilupparla sotto forma di plugin, ad esempio per jQuery... ma forse questo è già oltre le tue esigenze.

    Fai sapere, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    37
    Allora cerco di spiegare cercando di essere chiaro.
    In pratica sto realizzando un piccolo gioco in php, ovviamente a scopo del tutto amatoriale per approfondire le conoscenze.
    E in questo caso mi serve questa piccolo script in js per rendere diciamo dinamico il tutto.

    In poche parole l'utente ha una barra di energia che va da 0 a 100 punti. Quando fa delle azioni praticamente i punti energia diminuiscono e ha la possibilità di ricaricarla cliccando un pulsante. Ecco che quindi parte il timer che ovviamente non è infinito, ma sarà bloccato sempre dall'utente stesso quando deciderà di sospendere la carica. Quindi avrà un altro pulsante "sospendi" che farà terminare il timer e aggiungerà alla sua energia che aveva già (il fatidico 50 che ovviamente è solo un esempio) la differenza del tempo che ha caricato (quell'1% appunto che dicevi tu ogni tot tempo). Tutto qui, ovviamente tutto il lavoro è fatto lato server col php. Il js mi serve solo per rendere dinamico il timer e l'avanzamento della barra.
    Spero di essere stato chiaro e di ricevere consigli su come snellire quel codice postato da me. Grazie

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,619
    Mi è già più chiaro ma la cosa si complica un po'.

    In linea generale procederei in questo modo:

    Andrei comunque ad inglobare il tutto dentro una classe (o "oggetto") javascript. Ad esempio lo possiamo chiamare "ProgBar".

    L'argomento della programmazione orientata agli oggetti è abbastanza ampio per cui non mi dilungo troppo a descriverne tutti i vari eventuali concetti nel dettaglio, ma ti indico giusto quali sono i pro che potresti ottenere con un approccio del genere rispetto ad una programmazione più tradizionale, come nel tuo esempio.

    Il nostro oggetto ProgBar potrà essere istanziato, passandogli magari un parametro per identificare l'elemento HTML da utilizzare come contenitore, e conterrà tutte le funzioni (metodi dell'oggetto), le variabili (proprietà dell'oggetto), gli eventi (per i quali si potranno definire dei callback) che serviranno all'intero suo funzionamento.

    In questo modo si ottiene un certo ordine anche a livello programmatico oltre ad avere una più semplice gestione all'interno di un progetto più ampio (che sia più o meno complesso).

    Ad esempio questo evita l'uso indiscriminato di variabili volanti che servono solo per gestire gli elementi della barra ma che diversamente vagherebbero a livello globale senza troppo controllo.

    Il fatto che il tutto viene gestito col PHP mi fa presupporre che l'avanzamento della barra, e l'attuale valore/posizione, debba poter essere reimpostato al volo in qualsiasi momento, magari con delle richieste AJAX che interrogano il PHP e restituiscano ad esempio il valore attuale per il quale deve essere impostata appunto la posizione della barra; magari il valore in percentuale.

    L'oggetto ProgBar potrebbe quindi disporre di un metodo setValue() che imposta il valore percentuale con un'apposita variabile (interna all'oggetto), quindi un altro metodo redraw() che si occupa di ridisegnare opportunamente la barra in base al valore attuale, un metodo init() per l'inizializzazione, delle funzioni per particolari eventi (come il cambio di valore ogni tot tempo), delle altre funzioni per i suoi calcoli interni, ecc. Un po' come hai già fatto ma rivedendo il tutto con un approccio OOP.

    Per quanto riguarda la parte HTML io mi limiterei ad usare un semplice <div> come contenitore (dove sarà poi costruito il necessario per disegnare barra, testi, eventuali altri elementi), di cui sarà passato il suo riferimento alla funzione di inizializzazione dell'oggetto. Magari si può pensare di utilizzare un selettore jQuery così da poter passare come meglio si crede questo riferimento (usando un id, una class, una qualsiasi stringa di selezione CSS, il diretto riferimento all'elemento DOM, ecc.); magari con la possibilità che il riferimento identifichi più elementi, i quali andranno istanziati singolarmente usando un ciclo.

    Ancora, il tag <div> potrebbe essere pensato per poter impostare delle proprietà (in modo da personalizzare l'istanza), magari tramite l'uso di attributi data-; ad esempio potrebbe esserci un attributo data-val per poter impostare il valore percentuale iniziale, o quello della data iniziale per la quale sarà calcolato poi il valore percentuale, o qualsiasi altra proprietà che si voglia poter gestire in questo modo. Questo evita di iniettare la parte JavaScript con dei valori passati dal PHP, come hai fatto nel tuo codice di esempio.

    La personalizzazione (anche se solo per impostare un valore attuale come stato iniziale) è sempre meglio gestirla separatamente da quello che sarà invece il core (lo script proprio dell'oggetto ProgBar). Ciò che viene personalizzato è l'istanza di tale oggetto, non l'oggetto (classe) in sé.

    E' possibile usare diverse tecniche per lo scopo: attraverso appunto gli attributi applicati al tag HTML; attraverso il passaggio di parametri come argomenti del costruttore (o della funzione init) dell'oggetto; attraverso il CSS per definire più che altro l'aspetto estetico; altri eventuali metodi.

    Tali tecniche possono essere anche utilizzate assieme; ad esempio si può pensare di predisporre l'oggetto in modo che il suo valore possa essere impostato indipendentemente attraverso un parametro di inizializzazione o attraverso il suo attributo data-val, e magari che sia possibile aggiornare al volo il redraw modificando direttamente data-val, anche run-time magari dopo una risposta da una chiamata AJAX eseguita per recuperare tale dato lato serve.

    Per concludere, se vuoi tentare un approccio di questo tipo, sicuramente rivolto ad ottimizzare, nonché rendere più funzionale, quel tuo stesso script, posso darti qualche consiglio più dettagliato su come procedere, così che tu possa comunque familiarizzare con la OOP.

    In caso contrario, se ciò che chiedi è solo rivolto a snellire un po' lo script mantenendo comunque quell'impostazione, personalmente posso dirti (senza offesa) "se funziona lascialo purè così", per quelle poche righe non c'è molto da ridurre, anche se possibile; in tal caso può essere un buon compromesso minimizzare lo script con un qualsiasi servizio disponibile online
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.