1. [Javascript] Cambio dello sfondo della pagina in base all'ora

    Avatar
    Tags
    Javascript
    By Red eYe il 26 Nov. 2008
     
    +1   -1    19 Comments   5,825 Views
    .

    Javascript

    image


    Cambio dello sfondo della pagina in base all'orario.



    Questo script ha un effetto puramente decorativo: in base all'ora in cui viene caricata la pagina, alla stessa verrà assegnato uno sfondo diverso. Dal momento che molti blog stanno preparando delle skin invernali, si potrebbe fare un buon uso di questo script inserendolo in un periodo prossimo alle festività.

    Inserite questo tra i tag <head></head> della vostra pagina web (oppure in cima a tutte le pagine nella sezione gestione HTML se volete metterlo all'interno di un blog):
    HTML
    <script language="javascript">
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");
    //fine modifica

    function aggiungiSfondo(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.write("<style> body{background-image: url("+immagini[ore]+")}</style>");
    </script>


    Ora modifichiamo il codice in base alle nostre esigenze:
    Passiamo alla riga con il commento // modifica qui. Nella riga inferiore cominciono le attribuzione degli orari alle immagini.
    La sintassi da utilizzare è la seguente:

    aggiungiSfondo(orario_inizio_sfondo, orario_termine_sfondo, collegamento_alla_immagine);

    Sostituiamo a orario_inizio_sfondo l'ora in cui l'immagine comincerà ad essere visualizzata;
    Sostituiamo a orario_termine_sfondo l'ultima ora in cui l'immagine sarà ancora visualizzata;
    Sostituiamo a collegamento_alla_immagine, appunto, il collegamento diretto all'immagine da utilizzare (l'indirizzo dovrà essere comunque compreso tra le doppie virgolette)

    Esempio pratico: se vogliamo che uno sfondo venga mantenuto dalle 10 alle 15 e che questo sfondo si trovi sull'indirizzo "http://sfondi.it/pomeriggio.jpg" dovremmo scrivere aggiungiSfondo(10, 15,"http://sfondi.it/pomeriggio.jpg");
    Questo processo dovrà essere ripetuto tante volte quanti sono gli sfondi utilizzati, senza sovrascrivere gli orari inseriti precedentemente. Dovete cioè scrivere:
    aggiungiSfondo(10, 15,"http://sfondi.it/pomeriggio.jpg");
    aggiungiSfondo(16, 20,"http://sfondi.it/sera.jpg");
    aggiungiSfondo(21, 23,"http://sfondi.it/sera.jpg");
    senza che l'orario di inizio e di fine coincidano.

    Non vale scrivere aggiungiSfondo(16, 20,"http://sfondi.it/sera.jpg"); e aggiungiSfondo(14, 16,"http://sfondi.it/pomeriggio.jpg"); l'orario di inizio della prima istruzione coincide con quella finale della seconda; non potendo esistere 2 sfondi nello stesso orario, quella dichiarato per primo verrà sovrascritto, cioè dalle 16.00 alle 16.59 verrà visualizzato lo sfondo "http://sfondi.it/pomeriggio.jpg".
    Un'altra osservazione da fare è che non potete scrivere degli intervalli di orari che superano le 23. Vale a dire che non potete scrivere aggiungiSfondo(21, 2,"http://sfondi.it/notte.jpg"); in quanto il 2 si referisce al giorno successivo e quindi ad un orario dopo le 23. Per ovviare a questo problema potete comunque scrivere
    aggiungiSfondo(21, 23,"http://sfondi.it/notte.jpg");
    aggiungiSfondo(0, 2,"http://sfondi.it/notte.jpg");
    così, dalle 21 alle 2 verrà visualizzato lo sfondo "http://sfondi.it/notte.jpg".

    Edited by Red eYe - 27/11/2008, 00:48
      Share  
     
    .
 
.
Comments
  1. palkia100
    view post Posted on 27/11/2008, 21:10
        +1   -1
     
    .

    User deleted
    deve essere carino(se si sa come si usa...XD)...
     
    Top
    .
  2. Red eYe
    view post Posted on 27/11/2008, 21:40
        +1   -1
     
    .

    User deleted
    Riassumendo:

    Devi copiare lo script in una parte del sito.
    All'interno dello script modifica la seguente parte:
    CODICE
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");

    come specificato sopra, cioè mettendo come primo numero e secondo numero della funzione il l'orario in qui verrà visualizzata l'immagine specificata dopo.
    Ricordati di mettere le virgole dopo ogni parametro !!!
    Se hai ancora dei dubbi chiedi pure :P
     
    Top
    .
  3. Rublev
    view post Posted on 9/12/2008, 22:15
        +1   -1
     
    .

    User deleted
    in questo modo si potrebbero cambiare le immagini anke in base alle stagioni :lol:
     
    Top
    .
  4. alitoooooooooooo
    view post Posted on 28/7/2009, 19:04
        +1   -1
     
    .

    User deleted
    CITAZIONE (Red eYe @ 27/11/2008, 22:40)
    Riassumendo:

    Devi copiare lo script in una parte del sito.
    All'interno dello script modifica la seguente parte:
    CODICE
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");

    come specificato sopra, cioè mettendo come primo numero e secondo numero della funzione il l'orario in qui verrà visualizzata l'immagine specificata dopo.
    Ricordati di mettere le virgole dopo ogni parametro !!!
    Se hai ancora dei dubbi chiedi pure :P

    ciao ascolta ma io avendo un blog posso farlo??
     
    Top
    .
  5. Red eYe
    view post Posted on 28/7/2009, 20:21
        +1   -1
     
    .

    User deleted
    Certo
     
    Top
    .
  6. cicciocimo
    view post Posted on 26/4/2010, 10:43
        +1   -1
     
    .

    User deleted
    ma è possibile applicare lo script al tag <header> di una pagina?
    così da cambiare solo lo sfondo della testata del sito?
     
    Top
    .
  7. Red eYe
    view post Posted on 26/4/2010, 16:44
        +1   -1
     
    .

    User deleted
    dipende da cosa intendi per header:

    normalmente non esiste un tag chiamato "header", però questo potrebbe essere utilizzato unicamente in un sito per delimitare una data area.

    il codice è quasi uguale a quello di prima, tranne che per il fatto che cambia il CSS scritto:
    HTML
    <script language="javascript">
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");
    //fine modifica

    function aggiungiSfondo(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.write("<style> header{background-image: url("+immagini[ore]+")}</style>");
    </script>


    ho modificato solo
    CODICE
    document.write("<style> body{background-image: url("+immagini[ore]+")}</style>");
    in
    CODICE
    document.write("<style> header{background-image: url("+immagini[ore]+")}</style>");

    e il tutto dovrebbe funzionare (sempre che nella pagina sia presentsde un tag chiamato <header>).

    prova quel codice e dimmi se funziona ;)
     
    Top
    .
  8. cicciocimo
    view post Posted on 26/4/2010, 17:06
        +1   -1
     
    .

    User deleted
    grazie della risposta e scusa se sono stato poco chiaro, avevo già provato questa soluzione, cioè modificando il css, ma non funziona, e non riesco a trovare quale possa essere le regola per applicare lo script a qualsiasi tag. Nel mio caso <header>

    Aggiornamento.
    Dopo alcuni tentativi sono riuscito a capire cosa non andava nella regola css, per applicare lo script al mio tag <heder>, ecco la regola corretta

    CODICE
    document.write("<style> #header{background: url("+immagini[ore]+") top center no-repeat}</style>");


    insomma, se si tratta di un qualsiasi tag
    CODICE
    <div id="">
    basta inserire "#nometag", se invece si tratta di un tag <div class=""> basta inserire ".nometag"

    Edited by cicciocimo - 27/4/2010, 09:36
     
    Top
    .
  9. Red eYe
    view post Posted on 28/4/2010, 18:58
        +1   -1
     
    .

    User deleted
    quindi il si trattava di un div che aveva come id "header";

    in questo caso è giusto utilizzare la sintassi con il cancelletto, perché il cancelletto è il selettore che permette di identificare gli elementi portanti un certo ID.
     
    Top
    .
  10. Djrmxr
    view post Posted on 19/12/2010, 16:28
        +1   -1
     
    .

    User deleted
    Salve io stò cercando di mettere questo script in una oagina solo che io non voglio queste immagini come sfondo ma normali cioè c'è un immagine con sotto il testo e io voglio solamente far cambiare immagine automaticamente ad un ora stabilita.
    Aiutatemi per favore :(
     
    Top
    .
  11. Red eYe
    view post Posted on 29/12/2010, 23:30
        +1   -1
     
    .

    User deleted
    si, si può farlo modificando lo script sopra:

    CODICE
    <script language="javascript">
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");
    //fine modifica

    function aggiungiSfondo(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.IMM.src = immagini[ore];
    </script>


    l'immagine che vorrai utilizzare dovrà avere l'attributo name impostato su "IMM", ovvero, l'immagine che andrai ad utilizzare dovrà avere questa sitassi:

    CODICE
    <img src="#" name="IMM">

    inserisci il codice dell'immagine nella posizione in cui vuoi farla comparire e lo script dopo l'immagine (non è importante che compaia esattamente sotto l'immagine, può anche esserci del testo tra l'immagine e lo script; la cosa più importante è che lo script si trovi sotto l'immagine e non prima); ad esempio:
    CODICE
    <img src="#" name="IMM">

    testo o altro codice HTML

    <script language="javascript">
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");
    //fine modifica

    function aggiungiSfondo(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.IMM.src = immagini[ore];
    </script>
     
    Top
    .
  12. Djrmxr
    view post Posted on 30/12/2010, 09:00
        +1   -1
     
    .

    User deleted
    Mi sembra di aver capito però guarda come ho impostato il mio codice.
    Vedi se va bene:
    CODICE
    <script type="text/javascript">// <![CDATA[
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiImmagine(22,23,"http://url immagione notte");
    aggiungiImmagine(0,5,"url immagine notte");
    aggiungiImmagine(6,8,"url immagine mattina");
    aggiungiImmagine(9,12,"url immagine mattina");
    aggiungiImmagine(13,16,"url immagine pomeriggio");
    aggiungiImmagine(17,21,"url immagine sera");
    //fine modifica

    function aggiungiImmagine(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.IMM.src = immagini[ore];

    // ]]></script>


    Ora quello che non ho capito tanto bene è questo

    "inserisci il codice dell'immagine nella posizione in cui vuoi farla comparire e lo script dopo l'immagine (non è importante che compaia esattamente sotto l'immagine, può anche esserci del testo tra l'immagine e lo script; la cosa più importante è che lo script si trovi sotto l'immagine e non prima); ad esempio:
    CODICE
    CODICE
    <img src="#" name="IMM">

    testo o altro codice HTML

    <script language="javascript">
    var ore = new Date().getHours();
    var immagini = new Array();

    // modifica qui
    aggiungiSfondo(22,23,"immagine notte");
    aggiungiSfondo(0,5,"immagine notte");
    aggiungiSfondo(6,8,"immagine alba");
    aggiungiSfondo(9,12,"immagine mattino");
    aggiungiSfondo(13,17,"immagine pomeriggio");
    aggiungiSfondo(18,21,"immagine sera");
    //fine modifica

    function aggiungiSfondo(oraInizio, oraFine, immagine){
    oraInizio = Math.max(oraInizio,0);
    oraInizio = Math.min(oraInizio,23);
    oraFine = Math.max(oraFine ,0);
    oraFine = Math.min(oraFine ,23);

    if(oraInizio>oraFine)
    oraInizio = oraFine;

    for(var i = oraInizio;i<=oraFine;i++)
    immagini[i] = immagine;
    }

    document.IMM.src = immagini[ore];
    </script>
    "
     
    Top
    .
  13. Djrmxr
    view post Posted on 30/12/2010, 09:38
        +1   -1
     
    .

    User deleted
    Comunque volevo chiederti un altra cosa che con questo non c'entra proprio niente.
    Tu sapresti un javascript alert che funzionerebbe solo su internet explorer?
    Vale a dire che se una persona naviga con IE esce l'alert solo con quel browser.
    Grazie ancora :)
     
    Top
    .
  14. Red eYe
    view post Posted on 30/12/2010, 14:43
        +1   -1
     
    .

    User deleted
    Dunque, il codice è impostato in modo corretto, però non hai inserito l'immagine

    HTML
    <img src="#" name="IMM">


    quello che intendevo per
    CITAZIONE
    inserisci il codice dell'immagine nella posizione in cui vuoi farla comparire...

    è semplicemente che devi avere prima dichiarato l'immagine e poi lo script; quindi puoi scrivere così:
    HTML
    <img src="#" name="IMM">

    <script>
    //....testo dello script
    </script>

    mentre è sbagliato scrivere così:
    HTML
    <script>
    //....testo dello script
    </script>

    <img src="#" name="IMM">

    ovvero, prima dello script devi avere il codice dell'immagine (se no lo script non la trova).


    Dimenticavo di dirti, quelli che hanno javascript disabilitato non vedono alcuna immagine; se vuoi far visualizzare un'immagine per tutti quelli che hanno lo javascript spento, basta semplicemente che al posto del cancelletto inserisci l'indirizzo dell'immagine:
    CITAZIONE
    <img src="http://indirizzo immagine" name="IMM">

     
     
     
    Per IE, puoi farlo così:
    CODICE
    <script>
    if(document.all)){
      alert("Stai utilizzando internet explorer");
    </script>
    }

    sostituisci a "Stai utilizzando internet explorer" il testo che vuoi visualizzare
     
    Top
    .
19 replies since 26/11/2008, 21:32   5,825 views
  Share  
.
 
.
Forum
Create your blog! · Create your forum! · Top Blog · Categories · Help · Status · Contacts · Powered by BlogFree