cambiare colore DIV in base a diverse fasce orarie? (ore e minuti)

**italo_anonimo** · 02-10-2015, 12:20

ciao ragazzi, avevo bisigno di cambiare il colore del DIV in base a diverse fasce orarie.

ho trovato uno script che funziona, che mi permette di cambiare il colore del DIV ma solo con le ore e non con i minuti, avrei bisogno di specificare anche i minuti, qualcuno può gentilmente aiutarmi.

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test colore div - fasce ore</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   
<style>
    
.timeofday-bg {
    width: 60%;
    margin: 50px auto;
    padding: 20px;
}
.morning-bg {
    background-color: rgb(238, 229, 21);
}
.daylight-bg {
    background-color: rgb(58, 226, 16);
}
.evening-bg {
    background-color: rgb(221, 79, 34);
}
.twilight-bg {
    background-color: rgb(69, 123, 192);
}        
</style>
    
<!-- jquery change color of div each hour     -->
    <script type="text/javascript">
        $(document).ready(function() {
    
            var h = new Date().getHours();
/*             var m = new Date().getMinutes(); */
            
            var divs = $('.timeofday-bg');
                     if (h >= 6 && h < 12) {
                       divs.addClass('morning-bg');
                    } else if (h >= 12 && h < 18) {
                    divs.addClass('daylight-bg');
                    } else if (h >= 18 && h < 24) {
                    divs.addClass('evening-bg');
                    } else if (h >= 0 && h < 6) {
                    divs.addClass('twilight-bg');
                    }
            });
    </script>
    




</head> 
 
<body> 
    
    <div class="timeofday-bg">
        
                test, cambio colore DIV in base a fasce orarie.
    </div>
    
</body> 
</html>

grazie in anticipo.

ciao

**xabila** · 04-10-2015, 16:10

Originariamente inviata da italo_anonimo

ciao ragazzi, avevo bisigno di cambiare il colore del DIV in base a diverse fasce orarie.

ho trovato uno script che funziona, che mi permette di cambiare il colore del DIV ma solo con le ore e non con i minuti, avrei bisogno di specificare anche i minuti, qualcuno può gentilmente aiutarmi.

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test colore div - fasce ore</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   
<style>
    
.timeofday-bg {
    width: 60%;
    margin: 50px auto;
    padding: 20px;
}
.morning-bg {
    background-color: rgb(238, 229, 21);
}
.daylight-bg {
    background-color: rgb(58, 226, 16);
}
.evening-bg {
    background-color: rgb(221, 79, 34);
}
.twilight-bg {
    background-color: rgb(69, 123, 192);
}        
</style>
    
<!-- jquery change color of div each hour     -->
    <script type="text/javascript">
        $(document).ready(function() {
    
            var h = new Date().getHours();
/*             var m = new Date().getMinutes(); */
            
            var divs = $('.timeofday-bg');
                     if (h >= 6 && h < 12) {
                       divs.addClass('morning-bg');
                    } else if (h >= 12 && h < 18) {
                    divs.addClass('daylight-bg');
                    } else if (h >= 18 && h < 24) {
                    divs.addClass('evening-bg');
                    } else if (h >= 0 && h < 6) {
                    divs.addClass('twilight-bg');
                    }
            });
    </script>
    




</head> 
 
<body> 
    
    <div class="timeofday-bg">
        
                test, cambio colore DIV in base a fasce orarie.
    </div>
    
</body> 
</html>

grazie in anticipo.

ciao

In breve al momento la funzione definisce una variabile che diventa effettiva ad esempio se l'ora attuale è superiore alle 12 ma inferiore alle 18 e così via discorrendo, ora prova semplicemente a definire una variabile sui minuti ed a definire vera la prima variabile solamente se il i minuti sono uguali a quelli stabiliti o racchiusi in un determinato valore numerico

**xabila** · 04-10-2015, 18:08

Preciso che javascript non è il mio ambito ed il mio è unicamente un consiglio in ogni modo se può servirti new date richiama l'ora attuale mentre il metodo gethours ritorna l’ora dell’oggetto cui è applicato, usando il tempo locale, mentre getminutes fa riferimento ovviamente ai minuti. Mi spiace ma più di questo non posso aiutarti e spero vivamente che qualcuno del forum possa elargirti un consiglio o un indicazione più appropriata e completa.

**xabila** · 04-10-2015, 23:44

Anzi, che stupido che sono, prova invece a fare così:

var orario =newDate(); //diamo alla variante il valore dell'ora attuale senza prendere solo il valore Ora con getHours ma sia data che minuti che ora e secondi...

var divs = $('.timeofday-bg'); //diamo al div il valore neutro

if(orario >=scrivere ora e minuti&& orario <scrivere ora e minuti){
divs.addClass('morning-bg');
}elseif( .. ecc .. eccfammi sapere se funziona ahaha ;-)

**xabila** · 05-10-2015, 12:50

lascia perdere le ultime cose dette, oggi con il computer alla mano ho controllato ed ho fatto una prova e pare funzionare:

codice:

<script type="text/javascript">

            $(document).ready(function() {


               var h = new Date().getHours(); //h interpreta la data attuale e prende la funzione getHours
               var m = new Date() .getMinutes(); //h interpreta la data attuale e prende la funzione getHours
               var divs = $('.timeofday-bg'); //assume lo sfondo neutro di div


            if (h >= 6 && h <= 12 && m <= 30) //se l'ora è uguale o superiore alle sei o uguale o inferiore alle 12 ed i minuti uguali o inferiori a 30 assumi sfondo mattina
                 {
                    divs.addClass('morning-bg');
                 }
               else //se l'ora non corrisponde ai dati scelti
                {


                   divs.addClass('twilight-bg'); //assumi sfondo twilight
                }
            });






    </script>

Questo è con due orari, ovviamente lo puoi strutturare con le varie fasce orario utilizzando else if come nel tuo primo caso :-)

**italo_anonimo** · 07-10-2015, 15:53

ciao xabila, grazie per la risposta, appena posso eseguo un test...

ma una domanda, non ci vogliono i 2 punti ":" per dividere ore e minuti?? grazie ancora

if(h >=6&& h <=12&& m <=30)

**xabila** · 08-10-2015, 09:57

Originariamente inviata da italo_anonimo

ciao xabila, grazie per la risposta, appena posso eseguo un test...

ma una domanda, non ci vogliono i 2 punti ":" per dividere ore e minuti?? grazie ancora

if(h >=6&& h <=12&& m <=30)

Non mi risulta per i due punti, ma se posso due consigli:

i file js sempre al di fuori dei file html
cerca di evitare elenchi troppo lunghi di if and else if
ed in ultimo definisci il tag style delle CSS potrebbe darti problemi nell'eventualità

I consigli sono elargiti presupponendo che questo sia il tuo file effettivo, nell'eventualità sia semplicemente un preparato per il forum chino la testa e non dico più nulla ahaha

P.s Fammi sapere come andranno i test :-)

**italo_anonimo** · 14-10-2015, 06:44

ciao xabila, grazie per la risposta. confermo che il tuo codice funziona perfettamente. grazie per la disponibilità..

ultima cosa, volevo fare un controllo in diverse fascie orarie.

per esempio, ho un gruppo di attività ragruppate in una checklist. ogni attività ha una scadenza per esempio:

l'ora va dentro un div, il testo in un'altro

- 07.00 - 07.30 controllo 1
- 08.00 - 09.30 controllo 2
- 08.30 - 09.00 controllo 3
- 09.00 - 10.30 controllo 4

com'è posso fare ad aggiornare il colore del div una volta che ha superato l'ora di scadenza??

- per esempio il primo controllo 07.00 - 07.30

dalle 07.00 alle 07.30 il div deve essere giallo, se è stata eseguita l'attivita deve diventare verde e se ha superato l'ora di termine attivita e non è stata eseguita deve diventa rosso....

ho visto che c'è una funzione in javascript setinterval che permette di "refreshare" perche ho bisogno che venga refreshato anche se la pagina è aperta e non solo alla apertura della pagina..., ma non so se posso usarla con i div...

diciamo che i colori sono fissi per tutte le fascie, mentre solo l'ora è variabile...

qualche consiglio/suggeriemento da dove iniziare??

grazie in anticipo.

saluti

**xabila** · 14-10-2015, 10:23

Originariamente inviata da italo_anonimo

ciao xabila, grazie per la risposta. confermo che il tuo codice funziona perfettamente. grazie per la disponibilità..

ultima cosa, volevo fare un controllo in diverse fascie orarie.

per esempio, ho un gruppo di attività ragruppate in una checklist. ogni attività ha una scadenza per esempio:

l'ora va dentro un div, il testo in un'altro

- 07.00 - 07.30 controllo 1
- 08.00 - 09.30 controllo 2
- 08.30 - 09.00 controllo 3
- 09.00 - 10.30 controllo 4

com'è posso fare ad aggiornare il colore del div una volta che ha superato l'ora di scadenza??

- per esempio il primo controllo 07.00 - 07.30

dalle 07.00 alle 07.30 il div deve essere giallo, se è stata eseguita l'attivita deve diventare verde e se ha superato l'ora di termine attivita e non è stata eseguita deve diventa rosso....

ho visto che c'è una funzione in javascript setinterval che permette di "refreshare" perche ho bisogno che venga refreshato anche se la pagina è aperta e non solo alla apertura della pagina..., ma non so se posso usarla con i div...

diciamo che i colori sono fissi per tutte le fascie, mentre solo l'ora è variabile...

qualche consiglio/suggeriemento da dove iniziare??

grazie in anticipo.

saluti

Hey campione, è stato un piacere anche se so che sicuramente c'era un modo migliore di strutturare il codice proposto e mi spiace in questo senso non esserci riuscito pienamente, diciamo che sono ancora un novizio di Js

In ogni modo devo farti delle domande, davvero la mattina sono stupido e il cervello mi richiede notevoli sforzi per l'atto della comprensione, ma torniamo a noi:

"dalle 07.00 alle 07.30 il div deve essere giallo, se è stata eseguita l'attivita deve diventare verde e se ha superato l'ora di termine attivita e non è stata eseguita deve diventa rosso...."

Ma l'attività come risulterebbe? E' questo che mi sfugge sostanzialmente, cioè tu hai una checklist sul sito giusto? E se dopo mezzora io ho cliccato una spunta l'attività risulta eseguita ed ho un colore altrimenti ne ho un altro giusto? Ma il cambio di colore avviene in contemporanea dell'azione oppure scaduto il tempo?

In ogni modo pensiamo:

Per prima cosa direi che serve una funzione che determini che il risultato sia TRUE o FALSE o penso in questo caso sia meglio definirlo undefined.

Secondo punto una funzione che cambia il colore del div ogni tot tempo ma che aggiunge un richiamo alla prima function

In ultimo una funzione che ci ritorni il valore iniziale del div, questo perché setInterval non è propriamente un refresh ma bensì una lettura ciclica di un'espressione, per tanto può impostarlo che ogni tot tempo rilegga l'ultima funzione che ci ritornerà i valori iniziali del div (dovrebbe funzionare ma non metto la mano sul fuoco eh!?)
In breve lo definiamo con: setInterval(nomefunzione, msec [,param1 ...,paramN])

Al momento dico solo quello, poi quando avrò un poco di chiarezza in più sul tipo di attività legata all'evento allora magari potremmo vedere insieme anche come eventualmente scriverlo, ma come già detto non sono un asso e non assicuro, a presto campione e fammi sapere!

p.s ma ogni attività ha colori differenti? Inoltre ogni attività risulta come una singola voce della checklist o come più voci? Il div con il testo deve subire modifiche o è solo a livello di titolo e informazioni?

**italo_anonimo** · 14-10-2015, 16:25

grazie per la risposta e disponibilità, io sono proprio alle prime armi con js,jquery,php ma ho tanta voglia di imparare, inoltre mi aiuti di più proponendomi la logica (o com'è pensare) al momento di scrivere il codice, dopo incollo il codice che stavo "sviluppando" al momento non è dinamico perche volevo finire prima la parte frontend, comunque

sono 2 toggle, una fa da contenitore per tipo di checklist e l'altro per ogni attività che appartiene alla checklist...
- ogni attivita ha una ora di inizio e fine dentro a un div
- hanno un background di default
- se durante la sua fascia oraria non è stata eseguita deve essere gialla.
- devono diventare verde solo quando l'attività è stata eseguita, quindi dopo aver completato l'inserimento dei dati su un form (submit bottom)
- se fuori la sua fascia oraria deve essere rosso tranne quando è stata eseguita(colore verde)

tutte le checklist sono giornaliere e hanno una ora di inizio e fine diverse, dopo tale ora devono azzerare i controlli dei colori delle attività.

- checklist 1 - inizia 07.00 finisce 19.00

- attività 1 inizia 07.00 finisce 07.30
...
...
...
...
- attività 15 inizia 18.30 finisce 19.00

hehehehehehe dopo magari il codice html aiuta di più....

grazie ancora

saluti

Discussione: cambiare colore DIV in base a diverse fasce orarie? (ore e minuti)

Strumenti discussione

Ricerca discussione

Visualizza

cambiare colore DIV in base a diverse fasce orarie? (ore e minuti)

Permessi di invio